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

这个很简单，你只是忘了将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();

显然，您可以添加更多或更少的东西来根据您的需要进行定制。

Answer 2

有一个简单的解决方案，它只需要一些额外的数学运算：）

您正在(window)视口的顶部进行测量，并检查它是否大于或等于指定目标div的顶部。由于您的内容部分恰好是视口的100％，因此视口顶部不可能大于或等于最后一个内容div的顶部。

您需要做的是偏移您正在测量的点，这样您就不会从视口的顶部进行测量，而是从顶部向下测量，例如中途或3/4。这将解决您的两个问题。

编辑：这里有一些东西让你开始，然后玩窗户高度除以1/2或类似的东西：

var position = $(this).scrollTop() + $(window).height;

菜单项突出显示，因为我滚动到每个缺陷部分

2 个答案:

问题1

问题2