admin管理员组

文章数量:1610848

文章目录

  • 一、基本思路
  • 二、实现过程
    • 1.准备工作
    • 1.获取dom元素，设置偏移量
    • 2.给滑动添加事件
    • 3.判断是否在可视区
    • 4.脱离可视区触发回调函数
  • 总结

# 前言

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

废话不多说，开撕

一、基本思路

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

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

思路：

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

思路到位，开撕！

二、实现过程

1.准备工作

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

const sti

本文标签： 手把手你用简易版详细超超超超

版权声明：本文标题：超超超超详细！手把手带你用js实现简易版position:sticky 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1728604065a1165229.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。