Twitter Bootstrap Scrollspy highlighting last item only

StackOverflow https://stackoverflow.com/questions/17574991

Question

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?

Was it helpful?

Solution 2

It's the body you want to spy on.

Instead of

<div data-spy="scroll" >

use

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

OTHER TIPS

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

<!DOCTYPE html>

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.

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">
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top