Question

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

The working page

Answer 1

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

我建议使用scrollspy的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>

此外，在“关键优势”上没有提供内部ID链接，因此它会重定向到给定的链接。

Bootstrap Scrollspy不正确的突出显示

1 个答案: