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

Question

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

我现在正在开发一个单页网站，它有一个粘性（“固定”）导航栏。我将它设置为使用 jQuery 根据该部分 ID 滚动到页面下方的特定部分。但是，如何访问我当前所在的“当前”导航栏链接？

基本上，当我向下滚动页面时，我将浏览所有链接，我希望链接根据它所在的部分更改颜色。我是否需要使用 jQuery 来更改链接的类?或者引导程序是否为此内置了一些东西？

Answer 1

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

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

$('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