帮助我解决一些问题的链接:
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>
请注意使用 body 而不是文档中的 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>