这里混合两个元素有点问题！
我相信你以前见过这种技术。位于功能区域下方的粘性导航栏，当用户向下滚动时会粘到页面顶部。当用户向下滚动页面时，导航栏会点亮相应的部分，用户也可以使用导航栏跳转部分..
测试网站在这里：
http://www.domaincreative.co.uk/dev/midasflo-test2
scrollspy bootstrap元素在滚动时效果很好。但是，一旦单击某个区域，就会出现问题。通常它会转到错误的部分或突出显示导航中的错误区域，但在右侧部分。
有人知道可以做些什么来解决这个问题吗？我的猜测是，粘性导航可能导致高度问题？使它看起来比导航器坚持时更短？
基本上它一直有效，直到粘性导航生效，让它们两者一起工作的解决方案是什么？
答案 0 :(得分：6)
帮助我解决一些问题的链接：
http://mtjhax.wordpress.com/2013/02/11/twitter-bootstraps-scrollspy-plugin-needs-better-docs/
同样重要：
设置词缀
为nav元素提供data-spy =“affix”，data-offset-top =“”，data-offset-bottom =“”，其中从顶部或底部的偏移告诉浏览器何时切换导航的定位元件。 （注意：词缀顶部通常是位置：静态，词缀通常是位置：固定，而词缀底部通常是位置：绝对。）
获得正确的定位
确保在你的CSS中设置“位置：_____;”以及每个状态的“top：__ px”。 （可能你需要为.affix底部设置一个顶部.affix底部的位置和底部，而对于.affix-top没有任何设置。）
解决闪烁问题
如果你在滚动到bototm时遇到了导航元素闪烁的问题（类在.affix和.affix-bottom之间快速切换），那么你可能需要在父元素上设置position：relative 。我会建议父母占用导航将“旅行”的全部高度，这样你可以设置底部：0或底部：[底部所需的边距] .affix-bottom。
使用JS启动ScrollSpy
您已启动了网页的词缀部分。现在让我们启动spyscroll。请注意，您可以通过数据属性或通过js启动spyscroll。我们来做js。
在上面的链接中，只是复制代码是危险的，因为“＃”注释语法破坏了我的代码（Switched＃to //并且一切运行良好）。
将其添加到您的身体底部：
<script>
// initiates scrollspy on body targeting the nav wrapper
jQuery('body').scrollspy({ target: '#nav-wrapper' });
</script>
请注意使用body而不是doc中的nav元素。超级重要。 请注意，我的目标是导航包装器而不是导航器本身（如果定位导航器本身，间谍将无法工作，而导航中的底部li将始终突出显示）
完成
发现这一切都是一场噩梦，所以希望它有所帮助。
编辑：我的例子。 请注意，包装器保持其宽度，因此固定导航不会与其他内容重叠。 （我必须给导航本身一个宽度，这样当跳出导航包装时它不会改变大小。）
<ul class="nav nav-list affix" data-spy="affix" data-offset-top="585" data-offset-bottom="425" id="prepare-navigation">
<li class="nav-header">Where?</li>
<li class="divider"></li>
<li><a href="#at-the-museum-day-time">When?</a></li>
<li class="divider"></li>
<li><a href="#at-the-museum-overnight">Why?</a></li>
<li class="divider"></li>
<li><a href="#around-the-region">How?</a></li>
<li class="divider"></li>
<li><a href="#at-your-school-location">Etc?</a></li>
<li class="divider"></li>
</ul>
答案 1 :(得分：0)
很好的答案和帖子对我有帮助。我刚刚在Bootstrap 3上完成了这个操作，需要添加一些东西。
Bootstrap使用某些需要使用HTML5 doctype的HTML元素和CSS属性。将其包含在所有项目的开头。