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

Question

I have a notification that pops up during difference instances on my site, and I'd like that notification to follow the menu that animates when you scroll down.

The code I have is as follows:

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

The notification has a value right now of top: 150px which looks great when you're at the top of the screen but top: 74px looks great when scrolled down.

I also want it to animate , but I have no idea how to implement that as well.

A clip to demonstrate: https://www.dropbox.com/s/p6i95f5gkbyn4nm/MessageNotification.mov?dl=0

Answer 1

jQuery has a built-in animate function.

Just replace css with animate and make sure the value is integer. You can also give a duration in milliseconds as a second parameter to animate function.

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