Javascript 根据页面上的位置更改引导导航栏链接颜色

我有点困惑。在使用bootstrap之前，我已经创建了多个页面网站，我会在每个页面上都包含navbar标记，并将当前页面链接设置为.active类，这样我就可以访问它并很好地突出显示它

我现在在一个单页网站上工作，它有一个粘性（“固定”）导航栏。我已经设置好使用jQuery根据该节ID向下滚动到页面的特定节。但是，如何访问我当前所在的“当前”导航栏链接

---

基本上，当我向下滚动页面时，我会浏览所有的链接，我希望链接根据它所在的部分改变颜色。我是否需要使用jQuery来更改链接的类？或者bootstrap有内置的东西吗？

我想您正在寻找bootstrap的Scrollspy。当当前滚动位置与页面上某个元素的id匹配时，它将在导航栏

li

元素中设置

active

类

首先在BODY标签上设置Scrollspy。偏移是固定导航栏的高度：

$('body').scrollspy({
  target: '#myNavbar',
  offset: 50
});

HTML:

---

示例：

您能向我们显示代码吗（可能在JSFIDLE中），否则很难回答您的问题检查带有div/content offset的页面滚动位置？如果没有发布问题/问题或源代码，我只能建议查看

窗口。pageYOffset

和内容offset，例如

offsetTop

。我有一个网站使用纯javascript的相同菜单，运行得很好，但我相信jQuery会更容易，因为它大部分都是为你做的。这正是我想要的！非常感谢。我确定该如何解释它/用词表达它，但肯定是这样。就像我说的，我已经用多个页面完成了，因为每个页面都设置了active，但是在一个页面布局上，我知道需要实时更改active类。

 <div class="navbar-collapse collapse" id="myNavbar">
    <ul class="nav navbar-nav navbar-left">
       <li><a href="#section1">One</a></li>
       <li class="active"><a href="#section2">Two</a></li>
       <li><a href="#section3">Three</a></li>
       ..
    </ul>
 </div>   

 <div id="section1">Section One</div>
 <div id="section2">Section Two</div>
 <div id="section3">Section Three</div>

.navbar-nav li>a:hover,.navbar-nav li>a:focus,.navbar-nav li.active {
    background-color:#000;
}