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

menu items getting highlight as I scroll to each section with deficiency

本文关键字：菜单项 分时 显示 滚动 有缺陷      更新时间：2023-09-26

当我向下滚动到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问题是，最后一项(联系人)没有得到突出显示，当我向下滚动所有的方式向上联系部分。此外，如果我点击一个菜单项，它会转到相应的部分，但该菜单不会高亮显示，除非我将页面向下滚动一点。"怎么解呢?提前感谢

注意:似乎你从我对这个问题的回答中得到了代码，我已经编辑了它以涵盖你的情况。其他需要更多代码的人可以查看一个代码片段。

那么，你有两个问题:

  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();

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

有一个简单的解决方案，它只需要一点额外的数学:)

你是从(window)视口的顶部测量，并检查，看看它是否大于或等于一个指定的目标div的顶部。因为你的内容部分是完全100%的视口，这是不可能的视口的顶部曾经大于或等于最后一个内容div的顶部。

你需要做的是偏移你正在测量的点，这样你就不是从视口的顶部测量，而是从顶部向下测量，比如向下的一半或3/4。这将解决你的两个问题。

编辑:这里有一些东西可以让你开始，然后尝试将窗口高度除以1/2或类似的东西:

var position = $(this).scrollTop() + $(window).height;
相关文章：