Using the twitter bootstrap scroll spy

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

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.

Was it helpful?

Solution

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

OTHER TIPS

try this: jsfiddle

if Scrollspy highlight final element, you can add

height: 100%

to html and body tag

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top