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

当我向下滚动到我的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

注意：您似乎从我对这个问题的答案中获取了该代码，我已对其进行了编辑以涵盖您的案例。 寻找更多代码的其他人可以查看代码片段 。

---

所以，你有两个问题：

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

问题1

这个很简单，你只是忘了将id属性添加到最后一节:)
它应该是：

问题2

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

@Shnibble指向正确的方向，你可以为$(window).scrollTop()返回的值添加一个小的正边距（或者向元素offset().top的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;