向下滚动

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);