前端粘性定位事件

更新日期: 2019-10-26阅读: 3.2k标签: 定位分享

复制链接

新浪微博

QQ 好友

扫一扫分享

浏览器的世界里本没有粘性定位事件。然而，网页开发中，元素若使用了粘性定位 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

链接: https://fly63.com/article/detial/6646