# 前言
前面我们在介绍position属性时(不知道的小伙伴可以去看看我的另一篇说position的博客哟,传送门:手把手带你体验position各种属性)有了解到,sticky的兼容性是很差的,那么我们想达到类似的效果该怎么办呢?
废话不多说,开撕
一、基本思路
sticky就是元素处于页面某个布局,当元素超出可视区时,根据设置进行定位。
官方介绍:它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。
思路:
- 当元素处于原本位置时,设置position为relative
- 监听元素位置,当元素滑动到距离视口 0px 时再继续滑动,position替换为fixed
- 给滑动添加监听事件,监听元素是否在可视区
- 如果一直滑动会一直触发事件,给浏览器造成负荷,我们使用节流优化。
思路到位,开撕!
二、实现过程
1.准备工作
在实现前我们先分析一下,我们可以先建立一个函数,入参为需要监听的dom元素和对象,对象里面放置left等偏移量。
const sti