Menu
I cannot quite get the scroll spy to work properly with a vertical nav. Below you can find the code I use. For some reason, only "Two" gets active.
Anyone has an idea as of what is wrong?
<html lang="en"> <head> <meta charset="utf-8"> <title>Twitter Bootstrap Scroll Spy Playground</title> <link href="bootstrap/css/bootstrap.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="row"> <div class="span3"> <ul class="navbar nav nav-list affix"> <li class="active"><a href="#one">One</a></li> <li><a href="#two">Two</a></li> </ul> </div> <div class="span1" data-spy="scroll"> <section id="one"> <h1>One</h1> <h2>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. </h2> </section> <section id="two"> <h1>Two</h1> <h2>Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</h2> </section> </div> </div> </div> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="bootstrap/js/bootstrap.js"></script> </body> </html> 
535
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.
Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.
Scrollspy is a bootstrap plugin that automatically updates links in a navigation list based on the current scroll position. In the example below, scroll down the HTML page and note how the sections in the navigation bar are updated accordingly.
In sorting this out for myself, I've found that the element being spied upon needs to have a scroll bar.
Take a look at this Fiddle: http://jsfiddle.net/adamp/qgU6h/1/
You can either spy directly on the body element ($('body').scrollspy()) or give your content an explicit height and force it to show a scrollbar.
(If you look at the Bootstrap documentation example, it does the fixed-height trick.)
112
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
