如何使 HTML 元素“加速”到位

How to make an HTML element "accelerate" into position

本文关键字：加速 到位 元素 何使 HTML      更新时间：2023-09-26

在我的网站上，我有一个元素保留在上角，因此当用户向下滚动时会跟随用户。就像这个小提琴。相反，我想做的是在用户滚动时保持原位，然后加速回到固定位置，从而使它具有更好的跟随效果。我该怎么做？

#follow {
    position: fixed;
    right: 30px;
    top: 70px;
}

$(window).scroll(function(){
    // ???
});
如果您

更改为 position: absolute 然后使用 .animate() ，那么这样的事情怎么样。只需要确保在每个滚动上使用.stop()，这样如果您快速连续滚动两次，它就不会延迟。

#follow {
    position: absolute;
    right: 30px;
    top: 70px;
}

$(window).scroll(function(){ 
    $("#follow").stop();
    var window_top = $(window).scrollTop();
    $("#follow").animate({"top":window_top+70}, 500);
});

看看小提琴，看看它是否是你想要的：https://jsfiddle.net/f7gjvpof/3/

如果您必须将position设置为 fixed ，我认为它需要一个模拟移动的复杂动画（考虑到滚动时位置固定时没有 CSS 属性更改）。

但我认为如果您将position设置为 absolute ，那么您可以将元素的top设置为window.pageYOffset量，只需使用.animate和一些缓动，您真的可以让元素在滚动时加速......

相关文章：