4

ページが特定の値を超えてスクロールしたときに、クラス名「stuck」(position:static と position:fixed の切り替え) を追加または削除する必要があるページの上部近くにナビゲーション コンテナーがあります。FF と Chrome では問題なく動作しているようですが、もちろん IE (7、8、および 9) では問題が発生しています。

マウスホイールを使用してスクロールすると、ページが大幅に遅れます (基本的に使用できません)。ただし、水平スクロールバーをつかんでドラッグすると、ページは遅れることなくスムーズにスライドします。

調べてみると、おそらく IE が他のブラウザーよりもはるかに多くのスクロール イベントを実行していることが原因であることがわかりましたが、発生するイベントの数を調整する方法が正確にはわかりません。以下のコード ブロックで、「スクロール ストップ」ソリューションも使用していることがわかりますが、ページ上の特定のポイントを超えたときに、ユーザーがまだスクロールしている間にコールバックを実行できるようにする必要もあります。

私がそれを実装している方法はきれいで簡素化された基本的なものだと思いましたが、少なくとも IE だけでこれを処理するより良い方法はありますか?

var scrollValue = 0;
var scrollTimer = false;

$(window).bind('scroll', function(){
    scrollValue = $(window).scrollTop();

    // SET TIMER DELAY FOR SCROLL-STOP
    if (scrollTimer) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(scrollStopped, 25);

    // STICK/UNSTICK HEADER
    if (scrollValue > 320){
        if (!$(stickyWrap).hasClass('stuck')){
            $(stickyWrap).addClass('stuck')
        }
    } else {
        if ($(stickyWrap).hasClass('stuck')){
            $(stickyWrap).removeClass('stuck');
        }
    }
});
4

1 に答える 1

1

タイムアウトでダウン、スイッチでアップ

jQuery をもう少し単純にして、しきい値の前後に一度だけ実行するスイッチを追加すると、処理速度が大幅に向上するはずです。

var header = $('.stickyWrap'),
    trig = 320,
    go = true;

$(window).bind('scroll', function(){
    var scrollValue = $(this).scrollTop();

    if ((go && scrollValue > trig) || (!go && scrollValue <= trig)) {//before or after
        header.toggleClass('stuck');//toggle class
        go ? go = false : go = true;//toggle boolean
    }
});

これで、 のしきい値を超える前と後に 1 回だけ、何かを実行しようとし320ます。

メイド・ア・フィドル >

于 2014-10-05T19:53:28.510 に答える