0

昨日、サイズ変更ナビゲーション バーを作成する方法を見つけようとして、素晴らしい助けを得ることができました。ページを下にスクロールすると、コンテナー div のサイズが適切に変更されますが、ページの上部にスクロールしても何も起こりません。私は Zurb Foundation Framework、Reverie テーマ開発サーバーをここで使用しています: http://dev.bradmagnus.server287.com/

私はかなり必死に助けが必要です！私は、このナビゲーションを理解するのに非常に長い時間を費やしました。あなたの助けと、stackoverflow のこの素晴らしいコミュニティに本当に感謝しています!

これが完全に機能しているフィドルです：http://jsfiddle.net/magnusbrad/pRgNc/8/

問題のjQueryは次のとおりです。

var top = !$(document).scrollTop();

$(window).scroll(function () {
    console.log($(document).scrollTop());
    if ($(document).scrollTop() === 0 && !top) {

        $('div#navigation.fixed').stop().animate({'height':'140px'}, 300);
        $('.title-area img').attr('src', 'http://lorempixel.com/output/fashion-q-g-198-67-10.jpg');

        $('ul.right').animate({'margin-top':'0'}, 300);

        top = true;

    } else if (top) {

        $('div#navigation.fixed').animate({'height':'40px'}, 300);
        $('.title-area img').attr('src', 'http://lorempixel.com/output/fashion-q-c-198-67-6.jpg');
        $('ul.right').animate({'margin-top':'-50px'}, 300);

        top = false;

    }
});
4

1 に答える 1

0

これはかなり面白いものです:)。問題は次のとおりです。

この機能を使用する$(window).scroll(function () {}と、スクロールするたびにイベントがトリガーされます。したがって、ページ全体を下にスクロールすると、イベントが約 50 回トリガーされます。このフィドルを見てください。このエラーを表示するために、ログ機能をアラートに置き換えただけです。

これについて 100% 確信があるわけではありませんが、それが機能しない理由だと思います: 各トリガーに 300 ミリ秒のアニメーション時間を設定しました。これにより、複数回トリガーされると、アニメーションの持続時間が約 10 ～ 20 秒に変更されます。 . スクロールを止めてしばらく待つと、サイトのナビゲーションが再び表示されるのを見たことがありますか?

メニューを縮小するサイズ変更イベントを 1 回だけトリガーすることをお勧めします。トリガーされる他のスクロール イベントは、このイベントをスキップできます。次に、ユーザーがスクロールを終了したら、ユーザーがページの上にいるかどうかを確認します。はいの場合は、メニューのサイズを元のサイズに戻します。これらすべてをまとめて、このフィドルで見つけることができます。

アニメーションを完成させるには、jquery アクションに追加の css を設定するだけです。現在、実行中ですが $('div#navigation.fixed').stop().animate({'height':'140px'}, 300); 、メニューを表示するには、css も編集する必要があります。<ul class="right">そうしないと、ラッパーが縮小されるため、表示されません。

試してみて、それが役に立ったかどうか教えてください。

于 2013-10-22T09:37:11.037 に答える