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

我继续从 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);
});

Answer 2

如果您想要更通用的功能：

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 3

你可以这样做：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');
    }

});