jquery - Bootstrap Scrollspy 不正确的突出显示

Question

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

工作页面

Answer 1

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

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

<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 链接，因此它被重定向到给定的链接。