CSS 实现移动端滑动吸附效果

滑动吸附效果

实现效果：

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

实现思路：
布局上：
首先为吸附元素设定一个 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";
        }
    })
}