javascript - 根据页面上的位置更改 Bootstrap 导航栏链接颜色

Question

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

我现在在一个单页网站上工作，它有一个粘性(“固定”)导航栏。我将其设置为使用 jQuery 滚动到基于该部分 ID 的页面下方的特定部分。但是，如何访问我当前所在的“当前”导航栏链接？

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

Answer 1

我认为您正在寻找 Bootstrap 的 Scrollspy。当当前滚动位置与页面上元素的 id 匹配时，它将在导航栏 li 元素中设置 active 类。

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

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

HTML:

 <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>

然后覆盖此 CSS 以更改 .active 链接颜色:

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

示例:http://www.codeply.com/go/v1AEOlZMtC