Question

我已经阅读了很多关于这个主题的问题并尝试了一些不同的方法，但由于某些原因我无法使用scrollspy工作！

最近：

<body data-spy="scroll" data-target="#myScrollSpy">

和我的导航栏：

<!-- Main Navigation -->
<nav id="myScrollSpy">
    <div class="collapse navbar-collapse navHeaderCollapse">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#" data-id="section1" class="scroll-link">Portfolio</a></li>
            <li><a href="#" data-id="section2" class="scroll-link">About</a></li>
            <li><a href="#" data-id="section3" class="scroll-link">Team</a></li>
            <li><a href="#" data-id="section4" class="scroll-link">Services</a></li>
            <li><a href="#" data-id="section5" class="scroll-link">Contact</a></li>
        </ul>
    </div>
</div>

更新：我意识到我偶然关闭了<nav> </div>，并确定没有发生任何事情。还尝试取出<nav>并使用此代替<div class="collapse navbar-collapse navHeaderCollapse" id="#myScrollSpy">，但这也无效。我还认为没有活跃状态可能是问题，所以我在我的CSS中添加了ul.nav a:active { color: #fff; }，但这也没有用。

实时版HERE

Answer 1

为每个部分添加唯一ID，如下所示。（你已经拥有它）

<section id="section1">

然后在导航中将此ID用作href的{{1}}。

您没有为活动链接指定样式。所以你无法查看更改。但是，如果您检查代码，则会看到<li><a href="#section1">Portfolio</a></li>类已添加到导航的active元素中。要查看更改，请应用下面的活动样式 -

li

无法使用bootstrap 3 scrollspy工作

1 个答案: