2

スクロール イベントの条件を使用して、DOM のいくつかの要素をアニメーション化しようとすると、問題が発生します。まず、Drupal 7 を使用しているため、使用している jQuery ライブラリはバージョン 1.4.4 です。

ここで、ページ内の要素の css プロパティを変更して、ページがスクロールダウンしたときにヘッダーのサイズを縮小したいと考えています。

まず、スクロール イベントで、ウィンドウの scrollTop の位置を確認します。位置が 0 以外の場合 (ページが下にスクロールされていることを意味します)、ヘッダー内の要素でアニメーションをトリガーします。

位置がゼロの場合は、css プロパティを元の状態に戻して、ヘッダーがフル サイズを取得するようにします。

アニメーションの最初の部分は問題なく動作します。ページを下にスクロールすると、ヘッダーが期待どおりに縮小されます。しかし、ページを一番上までスクロールすると、2 番目のアニメーションが機能しません。アニメーションはすべてバグがあり、数秒後に発生し、乱暴になり、関数の影響を受ける css プロパティを前後に変更しanimate()ます。

誰もこれをクリアする方法の手がかりを持っていますか??

私が使用しているコードの簡略化された部分は次のとおりです。

$(window).scroll(function(){            

    if($(window).scrollTop() != 0){
        $('#myFirstElement').animate({marginTop: '20px'}, 300);
        $('#mySecondElement').animate({top: '20px'}, 300);
    }       
    else {
        $('#myFirstElement').animate({marginTop: '32px'}, 300);
        $('#mySecondElement').animate({top: '32px'}, 300);
    }

});
4

3 に答える 3

6

次のようなものを使用できます

http://jsfiddle.net/HjFH4/

$elem1 = $('#myFirstElement');
$elem2 = $('#mySecondElement');
var scrollState = 'top';

$(window).scroll(function(){ 

    var scrollPos = $(window).scrollTop();

    if( ( scrollPos != 0 ) && ( scrollState === 'top' ) ) {
        $elem1.stop().animate({marginTop: '0px'}, 300);
        $elem2.stop().animate({height: '10px'}, 300);
        scrollState = 'scrolled';
    }       
    else if( ( scrollPos === 0 ) && ( scrollState === 'scrolled' ) ) {
        $elem1.stop().animate({marginTop: '32px'}, 300);
        $elem2.stop().animate({height: '80px'}, 300);
        scrollState = 'top';
    }

});
于 2013-07-10T15:01:28.477 に答える