Animate div的CSS頂部屬性向下滾動時

我有一個通知，在我的網站上的差異實例期間彈出，我希望該通知跟隨在向下滾動時動畫的菜單。Animate div的CSS頂部屬性向下滾動時

我的代碼如下：

<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

來源

2017-02-04 Morgan Hassel

是否有可能分享網站鏈接或小提琴？ –

這夠好嗎？正如你所看到的，當向下滾動時，通知不會隨着菜單變小而變小：https://www.dropbox.com/s/p6i95f5gkbyn4nm/MessageNotification.mov?dl=0 –

jQuery有一個內置animate功能。

只需將css替換爲animate並確保該值爲整數。您還可以以毫秒爲單位給動畫功能賦予第二個參數。

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

來源

2017-02-04 13:53:44

謝謝！所以如果我使用.animate，我不需要.css標記？ –

是的，如果您使用.animate，則不需要.css。 –

Animate div的CSS頂部屬性向下滾動時

回答

相關問題