I can't seem to get scrollspy to work with hidden elements.
I place the data-spy="scroll" on the body, and data-target=".classOfNavWrapper", and it doesn't ignore the hidden elements like the docs imply, but rather seems to choose elements to activate almost at random.
Here's a fiddle: http://jsfiddle.net/shdapqap/1/
<div class="container">
<div class="row">
<div class="span3">
<div class="nav-wrapper">
<ul id="my-nav" class="nav nav-list affix">
<li><a href="#moose">Moose</a></li>
<li><a href="#bear">Bear</a></li>
<li><a href="#beaver">Beaver</a></li>
<li><a href="#raccoon">Raccoon</a></li>
<li><a href="#bobcat">Bobcat</a></li>
</ul>
</div>
</div>
<div class="span9 my-content">
<section id="moose">
Mooses are cool and big and stuff.
</section>
<section id="bear">
You better stay away from bears, they are bad news.
</section>
<section id="beaver">
Beavers like to slap their tail to scare predators and children.
</section>
<section id="raccoon" class="hidden">
Raccoons like french fries, don't ask me how I know.
</section>
<section id="bobcat" class="hidden">
I would like to know if bobcats go crazy for catnip like my house cat does.
</section>
<button class="show">Show next</button>
</div>
</div>
</div>
On the bottom is a show next button.. which shows the next hidden div and refreshes scrollspy, it only seems to work fluently once the last hidden class is removed.
Bootstrap version: 2.2.2 (stuck with that).
I solved this by replacing the ScrollSpy part of the Bootstrap 2.2.2 JS with the Scrollspy part from Bootstrap 3.3.5. And of course, remembering to refresh the scrollspy after revealing each item.