Question

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

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

以下是菜单的HTML :(其中一些类指向了style.css文件的很大一部分。我不确定它是否值得一提，所以请告诉我）< / p>

preg_replace('/\b([A-Z]+)\b/', '', 'VAN MELKEBEKE BLA BOEM BABA Kevin');

我在同一个文件中为活动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>

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

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

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

Answer 1

我认为this jsFiddle项目应该可以帮助您回答您的问题。该链接来自this以前的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");
});

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

1 个答案: