How to use Bootstrap scroll spy?
twitter-bootstrap, twitter-bootstrap-2
Solution
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.)
Problem
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> ```