如何根据当前页面部分突出显示这些菜单项？

Question

我相信答案在于 jQuery，我已经尝试了几种解决方案。

我的问题的根源是我正在修改这个网站，而我不是设计它的人。它是用 wordpress 制作的，但主题是高度定制的。这是一个包含多个部分的单页站点，顶部的菜单带有这些部分的锚链接。 我已经能够在单击时更改突出显示类，但是当相应部分在屏幕上可见时，我也需要更改它。我知道这应该很简单，但是这个网站的复杂性让我感到厌烦。

这是菜单的 HTML：（其中一些类指向 style.css 文件的很大一部分。我不确定是否值得一提，所以请告诉我）

<div class="ddsmoothmenu"><ul id="menu-home-2" class="menu">
<li class="menu-item"><a class="link" href="#home">Home</a></li>
<li class="menu-item"><a class="link" href="#our-story">Our Story</a></li>
<li class="menu-item"><a class="link" href="#services">Services</a></li>
<li class="menu-item"><a class="link" href="#tools">Tools of the Trade</a></li>
<li class="menu-item"><a class="link" href="#faqs">FAQs</a></li>
<li id="menu-item-310" class="menu-item"><a href="/category/blog/">Blog</a></li>
<li class="menu-item"><a class="link" href="#contact">Contact</a></li>
</ul></div>

我在同一个文件中用于活动 CSS 更改的样式：

<style>
a, a:visited { color:black }
a.link.active { color:blue; }
</style>

这是改变颜色的点击事件的脚本：

<script>
$(function() {
   $('a.link').click(function() {
       $('a.link').removeClass('active');
       $(this).addClass('active');
   });
});
</script>

我知道很多事情做得很糟糕......所以请原谅。 我想如果我能检测到当前可见的部分 ID，并激活关联菜单项的 CSS 类，那将是发薪日。救命！

Answer 1

我认为this jsFiddle 项目应该可以帮助您回答您的问题。该链接来自 this 之前的 SO 答案。

您必须将滚动事件绑定到窗口或某个容器。

上一个 SO 答案的快速示例：

// Cache selectors
var topMenu = $(".ddsmoothmenu"),
topMenuHeight = topMenu.outerHeight(),

// All list items
menuItems = topMenu.find("a"),

// Anchors corresponding to menu items
scrollItems = menuItems.map(function(){
  var item = $($(this).attr("href"));
  if (item.length) { return item; }
});

// Bind to scroll
$(window).scroll(function(){
   // Get container scroll position
   var fromTop = $(this).scrollTop() + topMenuHeight;

   // Get id of current scroll item
   var cur = scrollItems.map(function(){
     if ($(this).offset().top < fromTop)
       return this;
   });

   // Get the id of the current element
   cur = cur[cur.length-1];
   var id = cur && cur.length ? cur[0].id : "";
   // Set/remove active class
   menuItems
     .parent().removeClass("active")
     .end().filter("[href=#"+id+"]").parent().addClass("active");
});​