1

ページの上部に残るナビゲーション バーを作成しています。ユーザーが下にスクロールすると、このバーは縮小し、ユーザーがページの上部に戻ると、ナビゲーション バーは元のサイズに戻ります。

問題:ユーザーが下にスクロールすると、予想どおりナビゲーション バーが縮小します。ただし、ユーザーがページの上部にすばやくスクロールして戻ると、ナビゲーション バーは縮小されたままになり、コールバック関数animate()内のscrollTop()関数が数秒後にトリガーされます。

これをデバッグするためconsole.log($(window).scrollTop());に、ページ上のユーザーの現在の位置を教えてくれました。console.logユーザーがスクロールするのと同じくらい速く出力を取得します。しかし、 これはアニメーションが完了すると起動するはずですが、出力{console.log('animated');後数秒後に表示されません。console.log($(window).scrollTop());0

animate()ユーザーが上にスクロールしたときにすばやく応答するにはどうすればよいですか?

JS コード

var navBar = $('#navbar-inner');
var top = navBar.css('top');
$(window).scroll(function() {
    console.log($(window).scrollTop());
    if($(this).scrollTop() > 50) {
        navBar.animate({'marginTop':'-20', 'height':'60'}, 300);
    } else {
        navBar.animate({'marginTop':'0', 'height':'80'}, 300, function() 
            {console.log('animated');});
    }
});
4

2 に答える 2

1

（私のコメントを回答として投稿する）

.stop()新しいアニメーションを開始する前に、進行中のアニメーションを停止するために使用します。

于 2012-06-27T21:01:41.657 に答える
0

ユーザーのアクションよりも長く続くアニメーションで、以前にこの種の問題を経験しました。アニメーションを停止する必要があるだけです。

navBar.stop(true, true).animate(...);

stop() をよりよく理解するには、リンクhttp://api.jquery.com/stop/を参照してください。それが役に立てば幸い

于 2012-06-27T20:57:10.643 に答える