Menu
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.
766
Add data-spy="scroll" to the element that should be used as the scrollable area (often this is the <body> element). Then add the data-target attribute with a value of the id or the class name of the navigation bar ( . navbar ). This is to make sure that the navbar is connected with the scrollable area.
To easily add scrollspy behavior to your topbar navigation, add data-bs-spy="scroll" to the element you want to spy on (most typically this would be the <body> ). Then add the data-bs-target attribute with the ID or class of the parent element of any Bootstrap .nav component.
Scrollspy requires position: relative; on the element you're spying on, usually the <body> . When spying on elements other than the <body> , be sure to have a height set and overflow-y: scroll; applied. Anchors ( <a> ) are required and must point to an element with that id .
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-targetattribute with the ID or class of the parent element of any Bootstrap.navcomponent.
The code you posted wasn't working because you were spying on #top-fixed-nav (scroll events).
130
try this: jsfiddle
if Scrollspy highlight final element, you can add
height: 100%
to html and body tag
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
