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

Question

我正在使用 Twitter Bootstrap Affix JS 组件。当我向下滚动页面时，我的 UL 列表已正确粘贴。另外 - 当我单击单个列表项时(就像 Twitter 在其文档页面上所做的那样)，它会向下滚动到我的文档中的 anchor ID，但 LI 元素没有收到 Twitter 的“事件”类。当我滚动文档时，它也不会获得“事件”类。

当我滚动到文档中的特定部分(很像滚动 spy 作品)时，我希望适当的链接处于事件状态，但我似乎无法让它工作。

我需要设置什么特别的东西，以便 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'

了解此选择器创建的规定很重要。

原文target必须是包含类 nav 的元素的元素.所以.nav可能永远不应该成为你的目标。

.nav元素必须包含列表项。

这些列表项必须有 <a>作为一个直接的 child 。

<a>由它选择的元素然后被那些 data-target 的元素过滤掉。或 href以“#”开头。这些 href 's 依次用于选择 ScrollSpy 插件所附加到的元素中包含的元素。选择的偏移量被存储，当滚动发生时，将当前滚动偏移量与存储的值进行比较，更新相应的 <a>具有类 active 的元素.

希望这个总结可以帮助更好地理解在尝试实现插件时可能会遇到什么问题，而无需深入研究代码。