浏览器的世界里本没有粘性定位事件。 然而，网页开发中，元素若使用了粘性定位 position:sticky ，常常还需要一个粘性定位事件，比如，外卖菜单。
粘性定位元素的位置属性（position）设置为 sticky 时，即称为粘性定位。一个元素 <div> 应用了如下 CSS 声明，那么该元素称为粘性定位元素（stickily positioned element）。
.sticky { position: sticky; top: 10px;}必须指定 top、right、bottom、left 四个阈值的其中之一，粘性定位才会生效。此外，粘性定位元素的表现与其父元素有关。
当父元素是 body 时，其表现为固定定位，并不完全等同。
<!-- 元素 div.sticky 的表现接近固定定位 --><style> .sticky { position: sticky; top: 10px; background-color: green; height: 40px; }</style><body> <div class="sticky"></div></body>当父元素不是 body 时，父元素的高度（或宽度）必须大于粘性定位元素的高度，才能在页面滚动时，看出粘住效果。
<!-- 元素 div.parent 高度必须大于 div.sticky 的高度 --><style> .parent { height: 400px; } .sticky { position: sticky; top: 10px; background-color: green; height: 40px; }</style><body> <div class="parent"> <div class="sticky"></div> </div></body>粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前表现为相对定位，之后表现为固定定位，当其父元素也跨越特定阈值时，再次表现为相对定位。这种特殊的表现，说明其内部存在一个状态转换。如果这种状态转换发生时，触发一个自定义的事件，可称该事件为粘性定位事件（sticky-change event）。
粘性定位事件的实现
浏览器没有提供检测 sticky 状态转换的 API，也即没有粘性定位事件，所以只能采用间接的方法模拟。
浏览器里的实现一个可行的实现思路是，监听到 scoll 事件时，取目标元素的矩形信息（boundingClIEntRect），和设定的阈值比较，当目标元素跨越阈值时，触发自定义事件。
此外，还可使用一个较新的 IntersectionObserver API，异步观察目标元素和祖先元素或顶级文档（vIEwport）的交叉状态。由于跨越阈值，可以等同于目标元素和祖先元素产生一个交叉。所以，可以借助 IntersectionObserver 实现粘性定位事件。
其思路是，在位置属性设置为 sticky 的元素前后各插入一个节点，并对应创建 2 个交叉观察器，观察这 2 个节点和顶级文档的交叉状态。
广州设计公司https://www.houdianzi.com 我的007办公资源网站https://www.wode007.com
小程序里的实现浏览器平台， IntersectionObserver 创建的交叉观察器，只能观察目标元素和祖先元素的交叉状态。顶级文档（vIEwport）其实是根级祖先元素。这是一个限制。
小程序平台，createIntersectionObserer 创建的交叉观察，解除了这个限制，即可以观察和顶级文档的交叉（relativeToVIEwport），也可以观察和任一元素的交叉（relativeTo）。
如下代码，可以观察一个粘性定位元素是否进入特定的参照区域。这是支付宝小程序的实现，需要真机预览。
my.createIntersectionObserver({ selectAll: true }) .relativeTo('.relative') .observe('.sticky',(res) => { if (res.intersectionRatio > 0) { fireSticky('STUCK',res.ID) } else { fireSticky('UNSTUCK',res.ID) } })以上是内存溢出为你收集整理的前端粘性定位事件全部内容，希望文章能够帮你解决前端粘性定位事件所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）