2

jQuery とその animate() 関数を使用して、div の top: CSS プロパティを変更する、非常に単純なアニメーション化されたスティッキー サイド バーを作成しようとしています。残念ながら、クロム以外のすべてで、非常に遅くなる可能性があります。ウィンドウがスクロールするたびにメモリがいっぱいになり、newTopが計算されると想定しています。これを行うより良い方法はありますか？

$(function() { // document ready 
    var $sticky = $('.sticky');
    var stickyTop = $sticky.offset().top;
    var padding = 0;
    var stickyMargin = parseInt($sticky.css('margin-top')) + padding;
    var intersection = stickyTop - stickyMargin;

    $(window).scroll(function(){
        var windowTop = $(window).scrollTop();

        if (intersection < windowTop) {
            var newTop = (windowTop - intersection);
            $sticky.stop().animate({top: newTop}, 'slow');
        }
        else if ($sticky.offset().top != 0) {
            $sticky.stop().animate({top: 0}, 'slow');
        }
    });
});
4

1 に答える 1

1

私が見ている問題は、すべてのスクロール アクションによってアニメーションが作成され、ブラウザのレンダリング パイプラインでキューに入れられることです。アニメーションをデバウンスする必要があるため、全体が極端にバグるアニメーション スタックを取得できません。たとえば、スクロールが効果的に登録されるまで数ミリ秒待つことができます。jQuery Timeoutを見てください。その後、スクリプトの scroll() 関数を次のように編集して使用できます。

$(window).scroll(function(){
   $.doTimeout( 'scroll', 300, function(){
      // do your animation
   });
});
于 2012-11-18T17:11:56.083 に答える