我正在尝试在简单的页面上运行一个基本的引导滚动间谍。
我有一个插件设置显示我的代码（和问题）：http://plnkr.co/edit/qh4jJiCWY7nb7KFEE12R?p=preview
基本上我的身体标签中有这个。
<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>
事情在很大程度上是有效的。但是，滚动从当前的顶部书签跳转到最后一个书签在屏幕上显示的最后一个。这取决于屏幕大小，但是当我从1.3滚动到2.1时，在我的显示器上，导航中突出显示/活动的li跳转到2.3。即使我手动选择2.1或2.2，li上的课程也永远不会更改为“活动”，即使在屏幕上无法查看2.3。如果我在段落中添加文本以使其更长，那么事情就像预期的那样工作。
如何告诉scrollspy突出显示页面顶部的书签，而不是最底部的书签？此外，为什么2.1和2.2永远不会得到活跃的＆＃39;上课了吗？
我确信这很简单，但我不能为我的生活找出导致这种情况的原因。任何见解都会有所帮助。