修复滚动和 CSS 类切换后的导航

Question

我创建了一个简单的网页布局。你可以在这里找到它：http://jsfiddle.net/gUWdJ/1129/

在用户向下滚动到某个点后，我设法创建了固定导航。我一直在努力实现的是在用户从一个部分移动到另一个部分时为每个列表项分配一个class="active"。

当导航固定在视口顶部时，我希望将 class="active" 添加到第一个列表项中

<li>
   <a href="#something" class="active">something</a>
</li>

然后当我向下移动页面时，class="active" 被删除，然后添加到下一个列表项中。

我找到了一些可以做到这一点的插件，但事实是我还没有设法将它们集成到我的项目中。另外，由于我对jQuery非常陌生，所以对代码看不懂。

我还发现了这个http://jsfiddle.net/gUWdJ/3/，它再次很难集成..

那么，你的建议是什么？

提前谢谢你

Answer 1

我更新了你的fiddle 以包含一个新的 javascript 块，它根据你给出的示例小提琴处理菜单选项的突出显示。

我添加的块是：

$(".main-content section").each(function(i) { if ($(this).position().top <= windscroll - hdr + 20) { mn.find('a.active').removeClass('active'); mn.find('a').eq(i).addClass('active'); } });

这将遍历您有菜单选项的每个部分并检查窗口的滚动。在减去标题的高度并添加一些填充后，该数字将与页面上元素的位置进行比较。如果滚动大于位置，则将菜单元素标记为活动。

请记住，由于这些部分相当小，最后几个部分可能不会突出显示，因为您无法向下滚动那么远。