Using the twitter bootstrap scroll spy

Question

I've been trying and trying to get the scroll spy to work on my bootstrap site, but I'm unable to get it to work. The problem I'm having is, scrolling has no effect, wherever I scroll to. You can see what I'm doing here.

I've performed all the steps required i.e. below is the body tag

  <body data-spy="scroll" data-target="#top-fixed-nav">

and nav is also there:

            <ul class="nav" id="top-fixed-nav">
              <li>
                <a href="#home">Home</a>
              </li>
              <li class="">
                <a href="#about">About</a>
              </li>
              <li class="">
                <a href="#howto">How to Use?</a>
              </li>
              <li class="">
                <a href="#contact">Contact</a>
              </li>
            </ul>

Have called the scrollspy as well.

$('#top-fixed-nav').scrollspy();

Can anyone please have a look and please point out what I'm overlooking or doing wrong here.

Try `$('body').scrollspy();` – crackmigg Jul 28 '13 at 11:59 — crackmigg, Jul 28 '13 at 11:59

score 5 · Accepted Answer · answered Jul 28 '13 at 14:01

Docs say:

To easily add scrollspy behavior to your topbar navigation, add data-spy="scroll" to the element you want to spy on ( most typically this would be the <body>). Then add thedata-target attribute with the ID or class of the parent element of any Bootstrap .nav component.

The code you posted wasn't working because you were spying on #top-fixed-nav (scroll events).

Quang Anh Ho · Answer 2 · 2013-08-21T18:01:33.427

1

try this: jsfiddle

if Scrollspy highlight final element, you can add

height: 100%

to html and body tag

edited Aug 21 '13 at 18:01

answered Aug 21 '13 at 17:51

Quang Anh Ho

51
4

Using the twitter bootstrap scroll spy

2 Answers2