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

Question

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

我正在使用jquery滚动技术，我想适应我的项目。

请在此处查看我的项目示例http://jsfiddle.net/motocomdigital/gUWdJ/

目前，您可以看到我的导航链接会自动为相对于<section>的滚动设置动画。

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

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

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

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

任何人都可以向我展示一种技巧，我可以尝试使用或改编，或者让我使用我的jsfiddle：）

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

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

Answer 1

如果您希望使用更通用的功能：

SEE DEMO

$(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 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);
});