1

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');
    }
});

しかし、動作しません。誰かが私のコードを修正できますか？（説明が必要です）

ありがとう。

4

2 に答える 2

1

$('html, body').scroll()と置き換えます$(window).scroll()

そして$('html, body').scrollTop()_$(window).scrollTop()

それをチェックしてください：デモ

于 2013-02-16T09:52:01.557 に答える
1

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');
    }
});
于 2013-02-16T09:54:38.287 に答える