Bootstrap Scrollspy 不正确的突出显示答案

【问题标题】：Bootstrap Scrollspy Incorrect HighlightingBootstrap Scrollspy 不正确的突出显示
【发布时间】：2014-02-27 02:03:12
【问题描述】：

我有一个集成了 bootstrap scrollspy 的 WordPress 网站。滚动时会激活 Scrollspy，但它会在导航栏中错误地突出显示前两项。由于第一个内容框比其他内容框大，似乎存在偏移问题，但我在正文标签中添加了一个偏移量并通过jQuery('.navbar').scrollspy()。我还在页面的第一个内容框中添加了padding-top: 100px。这些解决方案都不起作用。我在这里错过了什么？

The working page

【问题讨论】：

我敢打赌这与你的“nicescroll”插件有关，而不是 bootstrap scrollspy。
@davidkonrad 不，只是禁用了它，但还是一样。
嘿@丹尼尔。你测试的是什么浏览器？我已经尝试过使用 chrome / ubuntu，我保证它可以工作。滚动时会突出显示正确的项目。如果你使用IE8，你应该添加html5.js。
@davidkonrad 导航栏上的前两项未正确突出显示。因为第一个内容框的高度大于其他内容框的高度，所以它无法识别。

标签： jquery wordpress twitter-bootstrap twitter-bootstrap-3 scrollspy

【解决方案1】：

默认情况下，ScrollSpy 绑定到具有数据属性data-spy="scroll" 的元素（在本例中为body 元素），但由于在就绪后加载了许多图像和内容，因此事件已经触发。

我建议使用滚动间谍的javascript api 来刷新使用刷新方法计算的偏移量和目标，如下面的代码所示：

<script type="text/javascript">
jQuery(document).ready(function() {
    setTimeout(updateScrollSpy, 1000);
});
function updateScrollSpy() {
    jQuery('[data-spy="scroll"]').each(function () {
      var $spy = jQuery(this).scrollspy('refresh')
    });
}
</script>

此外，在“Key Advantage”中未提供内部 id 链接，因此它被重定向到给定的链接。

【讨论】：

谢谢，这行得通。将jQuery(document).ready() 函数添加到刷新修复它。