2

jQueryを使用してナビゲーションバーのナビゲーションを実装しようとしています。しかし、運が悪い！この fiddleをご覧ください。

私の要件は、スクロールされたコンテンツに基づいてメニュー項目をアクティブにし、クリックされたメニュー項目に基づいてコンテンツをスクロールすることです。以下はコードです 

$('.menu-item').on('click', function () {
    var that = $(this);
    $('.menu-item').each(function () {
        $(this).removeClass('active');
    });
    that.addClass('active');
    var index = that.index();
    var target = $('.menu .menu-target').eq(index);
    $('.right').animate({
        scrollTop: target.offset().top
    }, 500);
});

$('.right').on('scroll', function () {
    var scrTop = $(this).scrollTop(),
        tgt = "";
    $('.menu-target').each(function () {
        var th = $(this),
            offTop = th.offset().top;
        if (offTop > scrTop && && tgt === "") {
            tgt = th;
        }
    });

    if (tgt !== "") {
        var index = tgt.index();
        $('.menu-item').each(function () {
            $(this).removeClass('active');
        });
        $('.menu-item').eq(index).addClass('active');
    }
});

しかし、これは機能していません。スクロール時のアクティブなメニュー項目の更新が機能していません。これを修正する方法は？

編集 問題を修正しようとしましたが、ここにコードがありますhttp://jsfiddle.net/SfR2c/11/ スクロールコンテンツに基づいてメニュー要素を更新する際に、いくつかの矛盾があります!

4

2 に答える 2

1

これを交換

 var target = $('.menu .menu-target').eq(index);

これで

 var target = $('.right .menu-target').eq(index);
于 2013-10-11T10:43:46.947 に答える
-3

あなたのニーズに合った実用的なソリューションがすでにあります。プログラミングするときは、できる限り再利用してください。

解決策は、twitter ScrollSpy の Bootstrapを使用することです

于 2013-10-11T10:30:44.330 に答える