I am trying to get a basic bootstrap scroll spy working on a simple page.
I have a plunk setup showing my code (and issue): http://plnkr.co/edit/qh4jJiCWY7nb7KFEE12R?p=preview
Basically I have this in my body tag.
<body data-spy="scroll" data-target="#sidebar">
<div class="container">
<div class="row">
<div class="col-xs-9">
<h2 id="section1-1">1.1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse posuere est in imperdiet mattis. Integer porta libero sed diam vestibulum, quis rhoncus nisl iaculis. Donec ac libero vehicula, ultricies ante sit amet, ornare libero. Nunc laoreet feugiat vehicula. Donec tempus sapien vel libero varius congue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut eget feugiat nisi, sit amet faucibus ex. Sed rhoncus, odio in ultricies hendrerit, dolor leo bibendum enim, id volutpat neque arcu sed lacus. Integer sit amet justo lectus. Vivamus id luctus ante. Vestibulum quis egestas dui. Praesent auctor leo id pharetra commodo. Donec id nisi nunc. Nulla vestibulum scelerisque velit id dapibus. Etiam imperdiet enim id mauris scelerisque, id egestas mi laoreet. Nunc porttitor dolor at suscipit consectetur.</p>
<h2 id="section1-2">1.2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse posuere est in imperdiet mattis. Integer porta libero sed diam vestibulum, quis rhoncus nisl iaculis. Donec ac libero vehicula, ultricies ante sit amet, ornare libero. Nunc laoreet feugiat vehicula. Donec tempus sapien vel libero varius congue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut eget feugiat nisi, sit amet faucibus ex. Sed rhoncus, odio in ultricies hendrerit, dolor leo bibendum enim, id volutpat neque arcu sed lacus. Integer sit amet justo lectus. Vivamus id luctus ante. Vestibulum quis egestas dui. Praesent auctor leo id pharetra commodo. Donec id nisi nunc. Nulla vestibulum scelerisque velit id dapibus. Etiam imperdiet enim id mauris scelerisque, id egestas mi laoreet. Nunc porttitor dolor at suscipit consectetur.</p>
<h2 id="section1-3">1.3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse posuere est in imperdiet mattis. Integer porta libero sed diam vestibulum, quis rhoncus nisl iaculis. Donec ac libero vehicula, ultricies ante sit amet, ornare libero. Nunc laoreet feugiat vehicula. Donec tempus sapien vel libero varius congue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut eget feugiat nisi, sit amet faucibus ex. Sed rhoncus, odio in ultricies hendrerit, dolor leo bibendum enim, id volutpat neque arcu sed lacus. Integer sit amet justo lectus. Vivamus id luctus ante. Vestibulum quis egestas dui. Praesent auctor leo id pharetra commodo. Donec id nisi nunc. Nulla vestibulum scelerisque velit id dapibus. Etiam imperdiet enim id mauris scelerisque, id egestas mi laoreet. Nunc porttitor dolor at suscipit consectetur.</p>
<h2 id="section2-1">2.1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse posuere est in imperdiet mattis. Integer porta libero sed diam vestibulum, quis rhoncus nisl iaculis. Donec ac libero vehicula, ultricies ante sit amet, ornare libero. Nunc laoreet feugiat vehicula. Donec tempus sapien vel libero varius congue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut eget feugiat nisi, sit amet faucibus ex. Sed rhoncus, odio in ultricies hendrerit, dolor leo bibendum enim, id volutpat neque arcu sed lacus. Integer sit amet justo lectus. Vivamus id luctus ante. Vestibulum quis egestas dui. Praesent auctor leo id pharetra commodo. Donec id nisi nunc. Nulla vestibulum scelerisque velit id dapibus. Etiam imperdiet enim id mauris scelerisque, id egestas mi laoreet. Nunc porttitor dolor at suscipit consectetur.</p>
<h2 id="section2-2">2.2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse posuere est in imperdiet mattis. Integer porta libero sed diam vestibulum, quis rhoncus nisl iaculis. Donec ac libero vehicula, ultricies ante sit amet, ornare libero. Nunc laoreet feugiat vehicula. Donec tempus sapien vel libero varius congue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut eget feugiat nisi, sit amet faucibus ex. Sed rhoncus, odio in ultricies hendrerit, dolor leo bibendum enim, id volutpat neque arcu sed lacus. Integer sit amet justo lectus. Vivamus id luctus ante. Vestibulum quis egestas dui. Praesent auctor leo id pharetra commodo. Donec id nisi nunc. Nulla vestibulum scelerisque velit id dapibus. Etiam imperdiet enim id mauris scelerisque, id egestas mi laoreet. Nunc porttitor dolor at suscipit consectetur.</p>
<h2 id="section2-3">2.3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse posuere est in imperdiet mattis. Integer porta libero sed diam vestibulum, quis rhoncus nisl iaculis. Donec ac libero vehicula, ultricies ante sit amet, ornare libero. Nunc laoreet feugiat vehicula. Donec tempus sapien vel libero varius congue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut eget feugiat nisi, sit amet faucibus ex. Sed rhoncus, odio in ultricies hendrerit, dolor leo bibendum enim, id volutpat neque arcu sed lacus. Integer sit amet justo lectus. Vivamus id luctus ante. Vestibulum quis egestas dui. Praesent auctor leo id pharetra commodo. Donec id nisi nunc. Nulla vestibulum scelerisque velit id dapibus. Etiam imperdiet enim id mauris scelerisque, id egestas mi laoreet. Nunc porttitor dolor at suscipit consectetur.</p>
</div>
<div class="col-xs-3" id="sidebar">
<ul class="nav nav-tabs nav-stacked affix-top" id="mynav0" data-spy="affix">
<li class="active"><a href="#section1-1">1.1</a></li>
<li><a href="#section1-2">1.2</a></li>
<li><a href="#section1-3">1.3</a></li>
<li><a href="#section2-1">2.1</a></li>
<li><a href="#section2-2">2.2</a></li>
<li><a href="#section2-3">2.3</a></li>
</ul>
</div>
</div>
</div>
</body>
Things are working for the most part. However, the scrolling jumps from the current top bookmark to the last the second the last bookmark shows on the screen. It depends on the screen size, but on my monitor when I scroll from 1.3 to 2.1, the highlighted/active li in the nav jumps to 2.3. Even if I manually select 2.1 or 2.2 the class on the li is never changed to 'active', even if 2.3 is not viewable on the screen. If I add text to the paragraphs to make them longer then things work like expected.
How do I tell scrollspy to highlight the bookmark that is at the top of the page, rather than the bottom most bookmark? Also, why do 2.1 and 2.2 never get the 'active' class added?
I am sure its something simple but I cannot for the life of me figure out what is causing this. Any insight would be most helpful.
