CSS 实现移动端滑动吸附效果_上滑吸附效果-CSDN博客

本文链接：https://blog.csdn.net/weixin_42995152/article/details/122151312

本文详细介绍了如何使用CSS和JavaScript实现页面元素的滑动吸附效果。通过设置元素的position属性和监听scroll事件，当页面滚动超过预设位置时，将元素吸附到顶部，反之则恢复原位。这种方法可以确保页面在滚动过程中保持平稳的视觉体验，避免内容抖动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

滑动吸附效果

实现效果：
在这里插入图片描述

可以看到上图中，综合排序一栏是随着页面滑动来控制它的吸附位置的，当滑动到猜你喜欢再继续往下，则吸附到顶部，回来的时候则放回原位置。

实现思路：
布局上：
首先为吸附元素设定一个 position:relative; 的父元素，给定固定宽度，用来占据真实位置，以免当吸附元素离开时因为元素的离开导致页面高度抖动。
给吸附元素设定 position:absolute; left:0;top:0; 绝对定位。

<div class="shop-filter-list"> <!--占据真实物理位置-->
   <div class="shop-filter-list-position"> <!--吸附元素-->
                   
   </div>
</div>

.shop-filter-list {
    position: relative;
}
.shop-filter-list-position {
	position:absolute;
	left:0;
	top:0;
	z-index:999;
}

js 实现：

为 document 监听 scroll 滚动事件。
定义变量：
scrollTop 页面滚动条与顶部的滚动距离
listTop : 吸附元素的父元素距离页面顶部的位置

判定：

当 scrollTop > listTop ：代表页面滑动到了吸附元素的位置并继续向下滑，让元素设定 position:fixed; 吸附顶部
否则 scrollTop < listTop ：代表页面滑动回到了吸附元素的位置并打算往上滑，让元素设定 position:absolute; 让元素回到原本的位置。

function swiper() {
    document.addEventListener('scroll', function (e) {
        let top = document.body.scrollTop || document.documentElement.scrollTop;
        let listTop = document.querySelector('.shop-filter-list').offsetTop; //元素距离页面顶部的位置
        if (Math.abs(top) >= (listTop)) {
            document.querySelector('.shop-filter-list-position').style.position = 'fixed';
            document.querySelector('.shop-filter-list-position').style.top = '100px';
            document.querySelector('.shop-filter-list-position').style.borderBottom = "1px solid #eee";
        } else if (Math.abs(top) <= (listTop)) {
            document.querySelector('.shop-filter-list-position').style.position = 'absolute';
            document.querySelector('.shop-filter-list-position').style.top = '0px';
            document.querySelector('.shop-filter-list-position').style.borderBottom = "none";
        }
    })
}