Bootstrap Scrollspy 不正确的突出显示

Posted

技术标签:

【中文标题】Bootstrap Scrollspy 不正确的突出显示【英文标题】:Bootstrap Scrollspy Incorrect Highlighting 【发布时间】: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 导航栏上的前两项未正确突出显示。因为第一个内容框的高度大于其他内容框的高度,所以它无法识别。 【参考方案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() 函数添加到刷新修复它。

以上是关于Bootstrap Scrollspy 不正确的突出显示的主要内容,如果未能解决你的问题,请参考以下文章

是否有与 Bootstrap Scrollspy 等效的 Flutter?

使用 Bootstrap、Scrollspy 和 Collapse 嵌套、折叠侧边栏导航?

html Bootstrap ScrollSpy

html Bootstrap ScrollSpy示例

JavaScript Bootstrap ScrollSpy替代动画

html Bootstrap ScrollSpy的中文ID目标错误