12

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

当我滚动到文档中的特定部分（很像滚动间谍作品）时，我希望适当的链接处于活动状态，但我似乎无法让它工作。

我需要设置什么特别的东西，以便 Bootstrap 在适当的时候添加“活动”类吗？

4

1 回答 1

29

是的，您还需要使用 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元素必须是包含具有 class 的元素的元素nav。所以.nav可能永远不应该成为你的目标。
  2. 该.nav元素必须包含列表项。
  3. 这些列表项必须具有 a<a>作为直接子项。

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

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

于 2012-08-25T20:36:58.383 回答