Bootstrap Scrollspy不正确的突出显示

Question

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

工作页面

Answer 1

默认情况下,ScrollSpy绑定到具有data属性的元素data-spy="scroll"(在本例中为bodyelement),但由于在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>

此外,在"Key Advantage"上没有提供内部id链接,因此它被重定向到给定的链接.