Twitter Bootstrap Scrollspy highlighting last item only

问题

I have been working a Twitter Bootstrap Scrollspy plugin, but for the life of me I can not get it to work. Here is the HTML for the content area

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

and here is the HTML code for the nav bar

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

I have looked at some of the other post, but for the life of me I can't figure out why it is only selected the last item in the navigation bar.

Could anyone help me figure out why scrollspy is only selecting the last item and how to correct it?

回答1:

It's the body you want to spy on.

Instead of

<div data-spy="scroll" >

use

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

回答2:

Adding the HTML doctype declaration to the top of the page fixed it for me:

<!DOCTYPE html>

回答3:

Try this code:

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

I have faced the similar problem. I have resolved the issue using the above code.

回答4:

Had a quick look at the documentation for ScrollSpy and it seems that you are missing the data-target.

In your case your first line would be:

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

来源：https://stackoverflow.com/questions/17574991/twitter-bootstrap-scrollspy-highlighting-last-item-only

标签

javascript

jquery

html

twitter-bootstrap

scrollspy