jquery滚动，在页面滚动时更改导航活动类，相对于节

http://jsfiddle.net/motocomdigital/gUWdJ/

我想要一个jquery滚动技术，我想适应我的项目。

请将我的项目示例视为小提琴http://jsfiddle.net/motocomdigital/gUWdJ/

目前，您可以看到我的导航链接会自动为相对于

的滚动设置动画。

我的问题是，使用$(window).scroll方法，当部分到达窗口顶部时，如何在nav a添加.active类？

因此，例如，如果用户向下滚动页面（而不是导航链接），我希望活动类添加相对导航链接。 指示您在页面上的位置。

每当我猜测用户向下滚动页面时，必须删除活动类，然后添加活动类。

此外，您还必须考虑固定导航栏的28px高度，偏移顶部窗口。

任何人都可以请给我一个技术，我可以尝试使用或改编，或者可能让我用我的jsfiddle 🙂

任何帮助将非常感谢，提前感谢！

http://jsfiddle.net/motocomdigital/gUWdJ/

Answer 1

如果您希望更通用的function：

看看演示

 $(window).scroll(function() { var windscroll = $(window).scrollTop(); if (windscroll >= 100) { $('nav').addClass('fixed'); $('.wrapper section').each(function(i) { if ($(this).position().top <= windscroll - 100) { $('nav a.active').removeClass('active'); $('nav a').eq(i).addClass('active'); } }); } else { $('nav').removeClass('fixed'); $('nav a.active').removeClass('active'); $('nav a:first').addClass('active'); } }).scroll();​ 

Answer 2

你可以这样做： http ： //jsfiddle.net/gUWdJ/1/

 $(window).scroll(function() { if ($(this).scrollTop() < $('section[data-anchor="top"]').offset().top) { $('nav a').removeClass('active'); } if ($(this).scrollTop() >= $('section[data-anchor="top"]').offset().top) { $('nav a').removeClass('active'); $('nav a:eq(0)').addClass('active'); } if ($(this).scrollTop() >= $('section[data-anchor="news"]').offset().top) { $('nav a').removeClass('active'); $('nav a:eq(1)').addClass('active'); } if ($(this).scrollTop() >= $('section[data-anchor="products"]').offset().top) { $('nav a').removeClass('active'); $('nav a:eq(2)').addClass('active'); } if ($(this).scrollTop() >= $('section[data-anchor="contact"]').offset().top) { $('nav a').removeClass('active'); $('nav a:eq(3)').addClass('active'); } }); 

Answer 3

我继续修改我的脚本A. Wolf因为我需要确保我的菜单项点亮了负顶差而不是0.这比创建一个单独的函数要好得多，并且避免必须创建一个单击每个菜单项的事件。 我还会修改此脚本以考虑菜单中的最后一项，如果倒数第二项，则应自动突出显示该脚本。 我想我的非常相似但不同，因为我处理了我的主要高亮function之外的每个循环。 关于我的修改的另一个好处是，在菜单项内部的链接中包含图像并考虑元素的高度以及当该元素的底部到达页面顶部时，这是突出显示的时候在新人之前结束。

 function highlight(item) { var itemTop = jQuery(item).position().top; var windowTop = jQuery(window).scrollTop(); var topDifference = (windowTop - itemTop); var itemHeight = jQuery(item).height(); var bottomDifference = topDifference - itemHeight; var menuId = jQuery('#nav-icons li a').attr('href'); if (menuId = item) { if(topDifference > -1 && bottomDifference < 0) { jQuery("#nav-icons li a[href='" + item + "']").parent().addClass('active'); jQuery("#nav-icons li a[href!='" + item + "']").parent().removeClass('active'); } else { jQuery("#nav-icons li a[href='" + item + "']").parent().removeClass('active'); } } } jQuery('#nav-icons li a').each(function(){ var eachAttr = jQuery(this).attr('href'); highlight(eachAttr); });