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

时间:2014-10-08 16:12:39

标签: jquery scroll css-position

我创建了一个简单的网页布局。您可以在此处找到它: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/再次难以整合..

那么,你的建议是什么?

提前谢谢

1 个答案:

答案 0 :(得分:0)

我更新了您的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'); } });

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

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