1 
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
    $('.nav').css('margin-top', '5px');
     $('.sep').css('margin-top', '20px');
     $('.logo').fadeOut(500);
     $('#navWrap').animate({
        height: '62px'
        }, 500, function() {
        });
}
}
);
$(window).scroll(function () {
 if ($(window).scrollTop() < 100) {
      $('.nav').css('margin-top', '23px');
     $('.sep').css('margin-top', '40px');
     $('.logo').fadeIn(500);
}
}
);

私はこのコードを持っています。これにより、下にスクロールするとナビゲーションの高さが100pxから62pxにアニメーション化されます。再び上部に到達すると、ナビゲーションを100pxにアニメーション化しようとしていますが、そうすることができないようです。

私は通常、2番目のウィンドウの.scroll関数に.animateを再び含めますが、それは何もしません。

4

1 に答える 1

1

あなたは近くにいました、ほんの少しの修正が必要でした。

  • まず、ナビゲーターの現在の状態を追跡する必要があります。それ以外の場合は、スクロールするたびに、アニメーションチェーンに追加して、アニメーションチェーンを大きくしたり小さくしたりする新しいリクエストを追加します。上から100の「しきい値」を超えたときにのみ、アニメーションをトリガーします。
  • 次に、アニメーションの前に呼び出すstop()か、下にスクロールしてから上にスクロールすると、新しいアニメーションがキューに入れられ、ナビゲーションバーが開閉し続けます。
  • 第三に、あなたは2回の呼び出しを必要としません$(window).scroll...あなたには排他的な条件があります。上から100を超えているか、下回っており、CSSの変更とアニメーションを実行するのは、まだ実行していない場合のみです。同じ機能に入れると管理しやすくなります。

var navsize = "large";
$(window).scroll(function () {
    if ($(window).scrollTop() > 100) {
        if (navsize == "large")
        {
            navsize = "small";
            $('.nav').css('margin-top', '5px');
            $('.sep').css('margin-top', '20px');
            $('.logo').stop().fadeOut(500);
            $('#navWrap').stop().animate({
                height: '62px'
            }, 500);
        }
    }
    else
    {
        if (navsize == "small")
        {
            navsize = "large";
            $('.nav').css('margin-top', '23px');
            $('.sep').css('margin-top', '40px');
            $('.logo').stop().fadeIn(500);
            $('#navWrap').stop().animate({
                height: '100px'
            }, 500);
        }
    }
});
于 2013-02-26T04:20:04.350 に答える