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.
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.
Share Improve this question edited Sep 30, 2014 at 11:47 Kamran Ahmed asked Jul 28, 2013 at 10:10 Kamran AhmedKamran Ahmed 12.4k23 gold badges72 silver badges103 bronze badges 1-
3
Try
$('body').scrollspy();– crackmigg Commented Jul 28, 2013 at 11:59
2 Answers
Reset to default 5Docs 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-targetattribute with the ID or class of the parent element of any Bootstrap.navponent.
The code you posted wasn't working because you were spying on #top-fixed-nav (scroll events).
try this: jsfiddle
if Scrollspy highlight final element, you can add
height: 100%
to html and body tag