スクロールダウン時にdivのCSSのトッププロパティをアニメーション化する

Question

私のサイトの相違インスタンス中にポップアップする通知があり、スクロールダウン時にアニメーション化されるメニューに従うように通知します。次のように

は

私が持っているコードは次のとおりです。

<script type='text/javascript'> 

var messageFollow = $('.woocommerce-info').offset().top; 

$(window).on('scroll', function(){ 
    if ($(window).scrollTop() >= messageFollow) { 
     $('.woocommerce-info').css({top: "150px"}); 
    } else { 
     $('.woocommerce-info').css({top: "74px"}); 
    } 
}); 

</script> 

通知は、画面の一番上にいるが、下にスクロールするときtop: 74pxは偉大に見えるとき素晴らしく見える今top: 150pxの値を持っています。

私はまたアニメーションにしたいと思いますが、それをどのように実装するかはわかりません。

実証するクリップ：https://www.dropbox.com/s/p6i95f5gkbyn4nm/MessageNotification.mov?dl=0

Answer 1

jQueryのは、ビルトインanimate機能を持っています。

cssをanimateに置き換え、値が整数であることを確認してください。 アニメーション機能の2番目のパラメータとして、ミリ秒単位の時間を与えることもできます。

$('.woocommerce-info').animate({top: 150},500);