4

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?

madth3
  • 7,275
  • 12
  • 50
  • 74
Robert E. McIntosh
  • 5,557
  • 4
  • 26
  • 35

4 Answers4

8

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

<!DOCTYPE html>
Antti Haapala -- Слава Україні
  • 129,958
  • 22
  • 279
  • 321
Curt
  • 101
  • 1
  • 1
6

It's the body you want to spy on.

Instead of

<div data-spy="scroll" >

use

<body data-spy="scroll" data-target="#navbar">
Mati
  • 1,378
  • 15
  • 20
  • Wow, I thought I tried this and it didn't work but it does seem to work except it doesnt change until it hits the bottom of the content area. Here is the site I am testing it on: http://pwbguild.com/test/demo.html – Robert E. McIntosh Jul 10 '13 at 16:15
  • If thats your website then good news, its working :) I'm in FF latest but it works as expected for me. Have you tried pressing CTRL-F5 on your keyboard to force the page to full refresh itself and all externally linked files? – rtpHarry Jul 10 '13 at 16:18
  • 1
    Just tested in IE10 and Chrome as well. Working fine. – rtpHarry Jul 10 '13 at 16:19
  • The issue on Google Chome is that it doesn't highlight the proper section until you get to the bottom of the section. I have realized this is due to the "navbar-fixed-bottom" class though. – Robert E. McIntosh Jul 10 '13 at 16:22
  • 1
    oh i see what you're saying, its one behind isnt it – rtpHarry Jul 10 '13 at 16:22
  • yeah, its not really the biggest bug, just cosmetically bad. haha – Robert E. McIntosh Jul 10 '13 at 16:23
1

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.

Jey
  • 23
  • 4
0

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">
rtpHarry
  • 13,019
  • 4
  • 43
  • 64