如何激活Twitter Bootstrap Affix组件的链接？

Question

我正在使用Twitter Bootstrap Affix JS组件.当我向下滚动页面时,我的UL列表正确粘贴.此外 - 当我点击单个列表项(很像Twitter在其文档页面上)时,它会向下滚动到我的文档中的锚点ID,但LI元素不会收到Twitter"活动"类.当我滚动文档时,它也没有得到"主动"课程.

当我滚动到文档中的特定部分时,我希望相应的链接处于活动状态(很像滚动间谍工作),但我似乎无法使其工作.

我需要设置一些特殊的东西,以便Bootstrap在适当的时候添加"活动"类吗？

Answer 1

是的,您还需要使用ScrollSpy插件.您可以通过标记或JS激活它.让它#scroll-pane成为触发滚动事件#navbar的元素并且是包含它的元素ul.nav,以下应该使它工作:

HTML

<div id="scroll-pane" data-spy="scroll" data-target="#navbar">

JS

$('#scroll-pane').scrollspy({target: '#navbar'});

使用HTML或JS,但不能同时使用两者.

附加信息

当ScrollSpy插件传递给目标时scrollspy({target: '#navbar'}),这用于构造表单的选择器

target + ' .nav li > a'

在这个例子中,它会给出

'#navbar .nav li > a'

了解此选择器创建的规定非常重要.

1. 原始target必须是包含带有类的元素的元素nav.所以.nav应该永远不会成为你的目标.
2. 该.nav元素必须包含列表项.
3. 这些列表项必须具有<a>直接子项.

在<a>通过这个选择的元素,然后通过那些过滤掉data-target或href以"#"开始.这些href用于选择ScrollSpy插件所附加元素中包含的元素.存储所选择的偏移量,并且当发生滚动时,使用所存储的值进行当前滚动偏移的比较,<a>用类更新相应的元素active.

希望这个摘要有助于更好地理解在尝试实现插件时可能会绊倒的内容,而无需深入研究代码.