[分享]css元素滑到指定位置不动

CSS元素滑到指定位置不动，是一种比较简单实用的效果。通过CSS控制元素的位置，可以让页面更加美观和实用。本文将介绍CSS元素滑到指定位置不动的实现方法。.scrollwrapper { height...

CSS元素滑到指定位置不动，是一种比较简单实用的效果。通过CSS控制元素的位置，可以让页面更加美观和实用。本文将介绍CSS元素滑到指定位置不动的实现方法。

.scroll-wrapper {
    height: 300px;
    overflow-y: auto;
}
.scroll-to-fixed {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
} 

首先，我们需要为元素所在的父级元素设置一个固定高度，并且给其添加滚动属性overflow-y为auto，这样不仅可以控制元素的位置，还可以让元素在页面滚动时保持不变。

接着，我们可以设置要滑动的元素的定位属性position: absolute;，并且设置top和left属性来控制元素的位置。其中，top属性表示元素距离父级元素的上偏移量，left属性表示元素距离父级元素的左偏移量。我们也可以通过transform: translateX(-50%);来让元素水平居中。

$(window).scroll(function() {
    var scrollDistance = $(window).scrollTop();
    $('.scroll-to-fixed').css({
        'top': scrollDistance + 20
    });
}); 

最后，我们需要通过JavaScript来控制元素的位置，使其在页面滚动时固定在指定的位置。我们可以通过$(window).scroll(function() {});来监听页面的滚动事件。当页面滚动时，我们可以通过$(window).scrollTop()来获取页面滚动距离，然后通过设置元素的top属性来控制元素的位置，使其固定在指定位置。

以上就是CSS元素滑到指定位置不动的实现方法。通过使用CSS和JavaScript，我们可以轻松实现这种效果，让页面变得更加美观和实用。