javascript - 当我滚动到每个有缺陷的部分时，菜单项会突出显示

Question

我只是使用这段代码在我向下滚动到我的 WordPress 网站的每个部分时突出显示我的菜单:

(function($) {
    $(document).ready(function(){
        $("header nav ul").toggleClass("open"); 
       $("section.container").addClass("section");

   }); 
  $(window).scroll(function() {

    var position = $(this).scrollTop();

    $('.section').each(function() {
        var target = $(this).offset().top;
        var id = $(this).attr('id');

        if (position >= target) {
            $('#primary-menu > li > a').removeClass('active');
            $('#primary-menu > li > a[href=#' + id + ']').addClass('active');
        }
    });
});
}(jQuery));

CSS:

.active{
    color: #fff !important;
}

这是链接:http://scentology.burnnotice.co.za 问题是当我一直向下滚动到联系人部分时，最后一项(联系人)没有突出显示。 另外，如果我点击一个菜单项，它会转到相应的部分，但除非我向下滚动页面一点点，否则该菜单不会突出显示。 我该如何解决？ 提前致谢

Answer 1

注意:您似乎从 my answer to this SO question 中获取了该代码，我已经对其进行了编辑以涵盖您的情况。其他寻找更多代码的人可以查看代码片段。

---

所以，你有两个问题:

1. 最后一项没有突出显示。
2. 点击菜单项时，页面会滚动到相应的部分，但除非向下滚动页面一点点，否则该菜单不会突出显示。

问题1

这个很简单，你只是忘了在最后一部分添加 id 属性:)
应该是:

<section id="contact" class="container contact-us section">  

问题2

您的点击事件启动了到相应部分的滚动动画，但是由于导航栏位于页面顶部，因此您制作的动画在顶部留有一点边距。该边距可防止该部分到达页面顶部，因此菜单项不会突出显示。

@Shnibble 为您指出了正确的方向，您可以为 $(window).scrollTop() 返回的值添加一个小的正边距(或为 offset 添加一个负边距().top 元素)。

因此，按照您包含的代码，它将类似于:

if (position + my_margin >= target) {

边距可以是导航栏的高度:

my_margin = $('#site-navigation').height();

显然，您可以根据自己的需要或多或少地添加一些内容。