超超超超详细！手把手带你用js实现简易版position:sticky

---

# 前言

前面我们在介绍position属性时（不知道的小伙伴可以去看看我的另一篇说position的博客哟，传送门：手把手带你体验position各种属性）有了解到，sticky的兼容性是很差的，那么我们想达到类似的效果该怎么办呢？

废话不多说，开撕

一、基本思路

sticky就是元素处于页面某个布局，当元素超出可视区时，根据设置进行定位。

官方介绍：它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

思路：

1. 当元素处于原本位置时，设置position为relative
2. 监听元素位置，当元素滑动到距离视口 0px 时再继续滑动，position替换为fixed
3. 给滑动添加监听事件，监听元素是否在可视区
4. 如果一直滑动会一直触发事件，给浏览器造成负荷，我们使用节流优化。

思路到位，开撕！

二、实现过程

1.准备工作

在实现前我们先分析一下，我们可以先建立一个函数，入参为需要监听的dom元素和对象，对象里面放置left等偏移量。

const sticky = (dom,obj) => {
      
    }

带我们带着问题去准备手撕：

1. 获取dom元素，在对象设置偏移量
2. 给滑动添加事件
3. 监听元素位置，判断是否在可视区
4. 脱离可视区position改为f