jquery animation on scroll

Question

私は、特定のポイントを超えてスクロールするときにページスケーリングの上にロゴパネルの単純なアニメーションを実装しようとしています。私はいくつかのCSSパラメータを変更するためにjqueryの.animate()関数を使用しました。私は.stop()関数を使ってスクロールするリスナを壊し、アニメーション全体が遅れなく動作するようにします。

ほとんどありますが、アニメーション中にジャーキーなラグが発生しています。例えば、私が下にスクロールすると、縮尺は変わりますが、全体的には小さくはなく、わずかに2番目の縮尺で完全に縮小された位置にジャンプします。スクロールアップでも同じことが起こります。スケールアップの前に、スケールが途中で調整されるか、わずかに数回停止します。あなたはそれをどう思いますか？ここで

は私のコードです：それはアニメーションに来るとき

(function($) { 
    $(document).ready(function() { 
     var animScroll; 
     $(window).scroll(function() { 

      if ($(this).scrollTop() > 700) { 
       animScroll = true; 
       $('#menu').stop().animate({height: '50px'}, { 
        queue: false, 
        duration: 400 
       }); 

       $('#toplogo').stop().animate({width: '150px'}, { 
        queue: false, 
        duration: 400 
       }); 

      } else if ($(this).scrollTop() < 700) { 
       $('#menu').stop().animate({height: '85px'}, { 
        queue: false, 
        duration: 400 
       }); 

       $('#toplogo').stop().animate({width: '300px'}, { 
        queue: false, 
        duration: 400 
       }); 
      } 
     }); 
    }); 
})(jQuery); 

Answer 1

jQueryのは最速ではありません。以下はCSSを使用したものです。フリッピングポイントを300ピクセルに変更しました。魔法のように

(function($) { 
 

 

 
    $(document).ready(function() { 
 
    var animScroll; 
 
    $(window).scroll(function() { 
 

 
     if ($(this).scrollTop() > 300) { 
 

 
     $('#toplogo').addClass("smaller"); 
 

 

 
     } else if ($(this).scrollTop() < 300) { 
 

 
     $('#toplogo').removeClass("smaller"); 
 

 
     } 
 
    }); 
 
    }); 
 
})(jQuery);

.container { 
 
    height: 1000px; 
 
} 
 

 
#menu { 
 
    position: fixed; 
 
    top: 0; 
 
} 
 

 
#toplogo { 
 
    transition: all .2s ease-in-out; 
 
} 
 

 
#toplogo.smaller { 
 
    transform: scale(0.5, 0.5); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div id="menu"> 
 
    <img id="toplogo" src="http://placehold.it/200"> 
 
    </div> 
 
</div>