0

我已经阅读了很多关于这个主题的问题，并尝试了很多不同的方法，但由于某种原因，我无法让 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">，但这也不起作用。我还认为没有活动状态可能是问题，所以我ul.nav a:active { color: #fff; }在我的 css 中添加了，但这也不起作用。

现场版在这里

4

1 回答 1

1

Add an unique id for each section, like below. (You already have it)

<section id="section1">

Then use this id as href of a in navigaton.

<li><a href="#section1">Portfolio</a></li>

You do not specify styles for active link. So you cannot view the changes. But if you inspect the code, then you will see that active class has been added to li element of navigation. To view the changes apply active styles something like below -

#myScrollSpy .nav > li.active a {
    color: #fff;
}
于 2014-03-16T13:14:26.547 回答