如何激活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元素。

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