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

I believe the answer lies in jQuery, and I've tried several solutions on this.

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

The root of my problem is that I am modifying this website and I'm not the one who designed it. It's made in wordpress, but the theme is heavily customized. It's a one page site with several sections, and a menu at the top with anchor links for those sections. I've been able to change the highlight class on click, but I need it to also change when the corresponding section is visible on screen. I know this should be simple, but the mere complicatedness of this site is throwing me off.

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

Here is the HTML for the menu: (some of these classes point to a large part of the style.css file. I'm not sure if it's worth mentioning, so let me know)

这是菜单的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>

The styling I have in the same file for the active CSS changes:

我在同一个文件中为活动CSS更改的样式:

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

And this is the script I have for the click events that change the color:

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

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

I know a lot of this is really poorly done...so excuse me. I think if I could detect the currently visible section ID, and activate the CSS class of the menu item associated, it would be payday. Help!

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

1 个解决方案

#1

I think this jsFiddle project should help you answer your question. The link is from this previous SO answer.

我认为这个jsFiddle项目应该可以帮助你回答你的问题。该链接来自此前的SO答案。

You have to bind a scroll event to the window or some container.

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

Quick example from previous SO answer:

以前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