今天小编跟大家讲解下有关前端粘性定位事件 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关前端粘性定位事件 的相关资料，希望小伙伴们看了有所帮助。
浏览器的世界里本没有粘性定位事件。然而，网页开发中，元素若使用了粘性定位 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 个节点和顶级文档的交叉状态。
小程序里的实现浏览器平台， 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) } })原文：https://zhuanlan.zhihu.com/p/93518890
来源：爱蒂网
