0

ユーザーがメイン ヘッダーを超えて下にスクロールした場合にのみ表示される、非常にシンプルなスライドダウン ナビゲーション バーを作成しました: http://hammr.co/9525666/23/index.html

ただし、アニメーションは驚異的で、まったくスムーズではありません。スクロール中に常に呼び出されているためだと思いますが、一度だけ呼び出す方法がわかりません。

私のコードは次のようになります。

function setOffset() {
    bannerH = $('header').height();
}   

function navTop() {
    if( $(window).scrollTop() > bannerH ) {
        $('#navbar').stop().animate({
            top: 0
        }, 100);
    } else {
        $('#navbar').stop().animate({
            top: -61
        }, 100);
    }
}

setOffset();

$(window).scroll(function(){
    navTop();
});

を削除する.stop()と、アニメーションに大きな遅延が生じます (バーがスクロールするまで「アニメーション化」するのに十分な時間を待つか、そのように見えると思います)。

とにかく、私の質問は簡単です – アニメーションがスムーズになるようにこれを調整するにはどうすればよいですか?

4

3 に答える 3

0

確かに、すべてのスクロール イベントでヘッダーをドロップまたは非表示にする代わりに、ウィンドウの上部の位置とバーの状態を取得し、必要な場合にのみ変更する必要があります。

function navTop() {

    var navTopShowing = $('#navbar').css('top') == 0;
    var windowTop = $(window).scrollTop();

    // If the top of the window is past the banner, and the banner is not showing, show it
    if ((windowTop > bannerH) && (!navTopShowing))
    {
        $('#navbar').stop().animate({
            top: 0
        }, 100);
    }

    // Hide it if it is showing
    if ((windowTop <= bannerH) && (navTopShowing))
    {
        $('#navbar').stop().animate({
            top: -61
        }, 100);
    }
}

テストされていませんが、うまくいけばアイデアが得られます。

于 2013-05-30T14:06:37.763 に答える
0

また、非常にスムーズだと思います。（少なくとも私のコンピュータでは）

CSS3 アニメーションはより高速になるはずです (ただし、あなたのケースでどれだけ気付くかはわかりません)。jQuery コールバックを使用した CSSのようなものを試してみることができます。

またはjquery.animate-enhanced plugin。

于 2013-05-30T14:06:44.610 に答える