滚动和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'); } });

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

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