向下滚动时对 div 的 CSS top 属性进行动画处理

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: 150px当您位于屏幕顶部时看起来很棒，但向下滚动时top: 74px看起来很棒。

我也希望它动画化，但我不知道如何实现它。

演示剪辑：https://www.dropbox.com/s/p6i95f5gkbyn4nm/MessageNotification.mov?dl=0

Answer 1

jQuery有一个内置的animate函数。

只需将css替换为animate并确保值为整数即可。您还可以将持续时间(以毫秒为单位(作为动画功能的第二个参数。

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