2

このチュートリアル ( http://tympanus.net/codrops/2011/01/03/parallax-slider/ )から適応した JavaScript 駆動の視差スライダーと、スクロール後にスライダー画像をフェードアウトする小さなスクリプトがあります。特定のポイント。

スクリプトは次のとおりです。

    $(document).ready(function() {

        $(window).scroll(function () {
            var $slider = $('.pxs_slider');
            var sTop = $('body').scrollTop();
            var sTop_ff = $('html').scrollTop();
            var opacity = 1;

            if(sTop < 40) {
                opacity = 1;
                if(sTop_ff < 40) {
                    opacity = 1;
                } else {
                    opacity = 0;
                }
            } else  {
                opacity = 0;
            }

            $slider.css('opacity', opacity);
        });
  });

すべて正常に動作しますが、この遷移中はスクロールが大幅に遅くなります。ただし、実際にはすべてのブラウザーの Chrome でのみこの問題が発生することがわかりました。Firefox ではパフォーマンス ヒットはありません。

私が試すことができるこの効果へのより効率的なアプローチはありますか?

4

1 に答える 1

1

$('.pxs_slider')スクロールバーが移動するたびにクエリが実行されないようにキャッシュすることが重要です。

$(document).ready(function() {
    var $slider = $('.pxs_slider');

    $(window).scroll(function() {
        var sTop = $('body').scrollTop();
        var sTop_ff = $('html').scrollTop();
        var opacity = 1;

        if(sTop < 40) {
            opacity = 1;
            if(sTop_ff < 40) {
                opacity = 1;
            } else {
                opacity = 0;
            }
        } else  {
            opacity = 0;
        }

        $slider.css('opacity', opacity);
    });
});

また、$(window).scrollTop()私は正しい方法だと思います：

$(document).ready(function() {
    var $slider = $('.pxs_slider');

    $(window).scroll(function() {
        $slider.css('opacity', $(window).scrollTop() < 40 ? 1 : 0);
    });
});
于 2012-08-30T01:59:35.357 に答える