在这里混合两个元素有点问题！
我相信你以前见过这种技术。位于功能区域下方的粘性导航栏，然后当用户向下滚动时会粘在页面顶部。当用户向下滚动页面时，导航栏会点亮相应的部分，用户也可以使用导航栏在部分之间跳转..
测试地点在这里：
http://www.domaincreative.co.uk/dev/midasflo-test2
scrollspy bootstrap 元素似乎在滚动时效果很好。但是，一旦您单击一个区域，就会出现问题。通常它会转到错误的部分或在导航中突出显示错误的区域但在正确的部分。
有人知道可以做些什么来解决这个问题吗？我的猜测是粘性导航可能导致高度问题？让它看起来比导航固定时更短？
基本上它在粘性导航生效之前一直有效，让它们一起工作的解决方案是什么？
【问题讨论】：
标签： javascript twitter-bootstrap scrollspy
帮助我解决一些问题的链接：
http://mtjhax.wordpress.com/2013/02/11/twitter-bootstraps-scrollspy-plugin-needs-better-docs/
同样重要：
设置词缀
给导航元素一个 data-spy="affix", data-offset-top="", data-offset-bottom="" 从顶部或底部偏移告诉浏览器何时切换导航的位置元素。 （注：affix-top一般是position:static，affix一般是position:fixed，affix-bottom一般是position:absolute。）
正确定位
确保在您的 CSS 中设置“位置：_____;”以及这些状态中的每一个的“顶部：__px”。 （可能您只需要为 .affix 设置一个顶部，为 .affix-bottom 设置位置和底部，而为 .affix-top 设置任何内容。）
解决闪烁问题
如果您在滚动到底部时遇到导航元素闪烁的问题（类在 .affix 和 .affix-bottom 之间快速切换），那么您可能需要在父元素上设置 position:relative .我会推荐一个占据你的导航将“旅行”的全部高度的父母，这样你就可以为 .affix-bottom 设置底部：0 或底部：[期望的底部边距]。
用 JS 启动 ScrollSpy
您已启动页面的词缀部分。现在让我们启动 spyscroll。注意可以通过数据属性或者通过js来发起spyscroll。我们来做js吧。
在上面的链接中，仅复制代码是危险的，因为“#”注释语法破坏了我的代码（将 # 切换为 // 并且一切正常）。
将此添加到身体底部：
<script>
// initiates scrollspy on body targeting the nav wrapper
jQuery('body').scrollspy({ target: '#nav-wrapper' });
</script>
注意使用正文而不是文档中的导航元素。超级重要。 请注意，我的目标是导航包装而不是导航本身（如果针对导航本身，间谍将不起作用，而是导航中的底部 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>
【讨论】：
position: relative;。那仍然行不通。这是我的工作示例：jsfiddle.net/nguyenj/d4PEN。 .affix 类和.affix-bottom 类来回切换非常快。
很好的答案和帖子对我有帮助。我刚刚在 Bootstrap 3 上完成了这一点，需要添加一些东西。
Bootstrap 使用需要使用 HTML5 文档类型的某些 HTML 元素和 CSS 属性。将它包含在所有项目的开头。
http://www.sitepoint.com/understanding-bootstraps-affix-scrollspy-plugins http://www.codingeverything.com/2014/02/BootstrapDocsSideBar.html
【讨论】：