0

同じページのリンクに Karl Swedberg の jquery スムーズ スクロール プラグインを使用しています: https://github.com/kswedberg/jquery-smooth-scroll

リンクの位置は固定されているため、常に表示されます。リンクをクリックすると強調表示されますが、ページをスクロールすると強調表示が削除されます (リンクが対応するセクションにいない可能性があるため)。

クリック時にリンクの色を変えるのは簡単です。ただし、プラグイン自体がスクロールするため、スクロール時に色を削除するのは困難です。私はこのコードで試しました：

$(document).ready(function() {
$('#scrollcontrolls a').smoothScroll(
    {
    afterScroll: function() { 
        $(window).scroll(function () { 
            $("#scrollcontrolls a").css("color", "black");
        });

    }
});
});

$(document).ready(function() {
$('#scrollcontrolls a').click(function() {
    $(this).css('color','red');
});
});

問題は、ウィンドウ スクロール機能が初期化されると、スムーズ スクロール プラグインがページをスクロールするたびに起動することです。つまり、1 つのリンクをクリックすると、クリック時にそのリンクに適用された色が常に上書きされるため、他のリンクをクリックしても色は変わりません。

ありがとう

編集-以下のコードで動作するバージョンを作成しました。

 $(window).bind('scroll', function () { 
$("#scrollcontrolls a").css("color", "black");
 });

 $(document).ready(function() {
$('#scrollcontrolls a').smoothScroll(
    {
    afterScroll: function() { 
        $(window).unbind();
        $(this).css('color','red');
        $(window).bind('scroll', function () { 
            $("#scrollcontrolls a").css("color", "black");
        });
    }
});
 });

ただし、リンクをクリックしても色が変わらない場合がありますが、もう一度クリックすると色が変わります。afterScroll で起動されるさまざまな関数は、常に順番に実行されるとは限りません。これが問題である場合、どうすればそうさせることができますか?

ありがとう

4

1 に答える 1

0

これは古い質問ですが、 jQuery Waypointsに言及することは有用かもしれないと考えました. 非常に便利なプラグインです。ここで見つけることができます。

于 2011-07-11T18:33:35.253 に答える