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

Question

我相信答案就在 jQuery 中，并且我已经尝试了几种解决方案。

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

这是菜单的 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 project 应该可以帮助您回答您的问题。链接来自this以前的 SO 答案。

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

来自先前 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");
});​