Question

这是JSFiddle链接： http://jsfiddle.net/asif097/HHEqx/

你好，

在上面的链接中，您会发现当点击链接时，active上会添加一个类('.nav-inner a')，同时页面也会滚动。（有关更多理解，请参阅代码）：

$(document).ready(function() {

    $('html, body').animate({
            scrollTop: $(".target1").offset().top
    }, 1000);

    $('#link1').click(function() {
        $('html, body').animate({
            scrollTop: $(".target1").offset().top
        }, 1000);
        $('.nav-inner a').removeClass("active");
        $(this).addClass("active");
    });
    $('#link2').click(function() {
        $('html, body').animate({
            scrollTop: $(".target2").offset().top,
        }, 1000);
        $('.nav-inner a').removeClass("active");
        $(this).addClass("active");
    });
    $('#link3').click(function() {
        $('html, body').animate({
            scrollTop: $(".target3").offset().top
        }, 1000);
        $('.nav-inner a').removeClass("active");
        $(this).addClass("active");
    });

});

现在我希望这种情况发生，当我手动滚动addClass（）时，运行方式相同。试过这个：

    $('html, body').scroll(function ()
{
    if(($('html, body').scrollTop())<1000)
    {
        $(".nav-inner a").removeClass('active');
        $(".nav-inner a:nth-child(1)").addClass('active');
    }
    else if(($('html, body').scrollTop())<2000)
    {
        $(".nav-inner a").removeClass('active');
        $(".nav-inner a:nth-child(2)").addClass('active');
    }
    else
    {
        $(".nav-inner a").removeClass('active');
        $(".nav-inner a:nth-child(3)").addClass('active');
    }
});

但，不起作用。任何人都可以修复我的代码吗？（预计会有解释）

感谢。

Answer 1

将$('html, body').scroll()替换为$(window).scroll()

$('html, body').scrollTop()与$(window).scrollTop()

检查出来：DEMO

Answer 2

http://jsfiddle.net/HHEqx/4/

$(window).scroll(function (){
    var scrll = $(this).scrollTop();
    if(scrll < 1000)
    {
        $(".nav-inner a").removeClass('active');
        $(".nav-inner a:nth-child(1)").addClass('active');
    }
    else if(scrll < 2000)
    {
        $(".nav-inner a").removeClass('active');
        $(".nav-inner a:nth-child(2)").addClass('active');
    }
    else
    {
        $(".nav-inner a").removeClass('active');
        $(".nav-inner a:nth-child(3)").addClass('active');
    }
});

手动滚动添加类在这里不起作用

2 个答案: