Twitter Bootstrap Scrollspy 仅突出显示最后一项答案

【问题标题】：Twitter Bootstrap Scrollspy highlighting last item onlyTwitter Bootstrap Scrollspy 仅突出显示最后一项
【发布时间】：2013-07-10 15:38:24
【问题描述】：

我一直在使用 Twitter Bootstrap Scrollspy 插件，但我一生都无法让它工作。这是内容区域的 HTML

<div data-spy="scroll" >
  <section id="page_home" class="page_home" style="width:100%;background-color:rgb(245,245,245);">
    <div class="container">
      Home
    </div>
  </section>

  <section id="page_projects" class="page_projects" style="width:100%;background-color:rgb(25,25,25);">
    <div class="container">
      Projects
    </div>
  </section>

  <section id="page_services" class="page_services" style="width:100%;background-color:rgb(245,245,245);">
    <div class="container">
      Services
    </div>
  </section>

  <section id="page_downloads" class="page_downloads" style="width:100%;background-color:rgb(25,25,25);">
    <div class="container">
      Downloads
    </div>
  </section>

  <section id="page_about" class="page_about" style="width:100%;background-color:rgb(245,245,245);">
    <div class="container">
      About
    </div>
  </section>

  <section id="page_contact" class="page_contact" style="width:100%;background-color:rgb(25,25,25);">
    <div class="container">
      Contact
    </div>
  </section>
</div>

这里是导航栏的 HTML 代码

<div id="navbar" class="navbar navbar-inverse navbar-fixed-bottom">
  <div class="navbar-inner">
    <div class="container">
      <ul class="nav">
        <li><a href="#page_home">Home</a></li>
        <li><a href="#page_projects">Projects</a></li>
        <li><a href="#page_services">Services</a></li>
        <li><a href="#page_downloads">Downloads</a></li>
        <li><a href="#page_about">About</a></li>
        <li><a href="#page_contact">Contact</a></li>
      </ul>
    </div>
  </div>
</div><!-- /.navbar -->

我看过其他一些帖子，但对于我的生活，我无法弄清楚为什么它只选择了导航栏中的最后一项。

谁能帮我弄清楚为什么 scrollspy 只选择最后一项以及如何纠正它？

【问题讨论】：

标签： javascript jquery html twitter-bootstrap scrollspy

【解决方案1】：

这是您要监视的body。

代替

<div data-spy="scroll" >

使用

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

【讨论】：

哇，我以为我试过了，但它没有工作，但它似乎工作，除了它不会改变，直到它到达内容区域的底部。这是我正在测试的网站：pwbguild.com/test/demo.html
如果那是您的网站，那么好消息，它的工作原理:) 我是最新的 FF，但它对我来说可以正常工作。您是否尝试过按键盘上的 CTRL-F5 来强制页面完全刷新自身和所有外部链接的文件？
刚刚在 IE10 和 Chrome 中测试过。工作正常。
Google Chome 的问题是它不会突出显示正确的部分，直到您到达该部分的底部。我已经意识到这是由于“navbar-fixed-bottom”类。
哦，我明白你在说什么，它的背后不是它

【解决方案2】：

试试这个代码：

 $('[data-spy="scroll"]').each(function () {
     var $spy = $(this).scrollspy('refresh')
  });

我也遇到过类似的问题。我已经使用上面的代码解决了这个问题。

【讨论】：

【解决方案3】：

将 HTML doctype 声明添加到页面顶部为我修复了它：

<!DOCTYPE html>

【讨论】：

欢迎来到stackoverflow；你想阅读formatting help

【解决方案4】：

快速查看the documentation for ScrollSpy，您似乎错过了data-target。

在您的情况下，您的第一行将是：

<div data-spy="scroll" data-target="#navbar">

【讨论】：