How to use Bootstrap scroll spy?
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>
Answer
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.)