jqueryのanimateがうまく動作しない

Question

###困っていること

以下のjQueryプログラムを読み込ませてスクロールの高さによってヘッダーの高さを変えようとしたのですが、うまくいきません。具体的な問題としては、「50pxに変化する反応が遅い」「50pxになった後上にスクロールして戻っても80pxに戻らない」の二つです。解決策を教えてください。

$(function() {
    navPos = $('.contents').offset().top;
    $(window).on('load scroll',function() {
        var value = $(this).scrollTop();
        if ( value > 5) {
            $('header .header-wrapper').animate({
                'height': 50
            },'fast');
            // $('.header-wrapper').css('height',50+'px');
        } else {
            $('header .header-wrapper').animate({
                'height': 80
            },'fast');
            // $('.header-wrapper').css('height',80+'px');
        }
    });
});

Answer 1

「50pxに変化する反応が遅い」

animate( { height: '50'}, 'fast' )の'fast'はミリ秒で指定できるので、好きな数字を入れれば早くなります。
ちなみに'fast'は200を意味するので、それ以下の10とかにすれば早くなります。

「50pxになった後上にスクロールして戻っても80pxに戻らない」

animate()をstop()してあげればいいと思います。

上記２つの変更を実行するサンプル

Comments

[sodiumplus3]

なおりました！ありがとうございます。ちなみに何故.stop()でなおったんでしょうか…

[ikatako]

スクロールするたびに毎回
$('header .header-wrapper').animated()
が実行されまくっているからですね。
なのでstop()でanimated()をリセットしてあげたということです。

[sodiumplus3]

なるほどです！ありがとうございました。