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 嵌套、折叠侧边栏导航?