第 003 期 如何探测 sticky 定位的元素是否处于 固定定位(Pined)状态

场景描述

sticky 定位的元素，有两个状态：相对定位和固定定位。开发时，有给处于固定定位(Pined)状态 sticky 定位的元素加额外样式的需求。如加个阴影效果。

sticky-width-shadow.gif

目前，没法通过 CSS 知道 sticky 是否处于固定定位的状态。

解决方案

对于这个场景，可以用 JS 实现。

判断元素是否处于固定定位状态，就是判断该元素与滚动的父元素的位置关系。

当该元素部分处于固定定位状态时，其相对于滚动的父元素部分不可见。可以用 Intersection Observer 来监听该元素与滚动的父元素的位置关系。

以下是具体的代码实现：

intersectionRatio：目标元素的可见比例，即intersectionRect占boundingClientRect的比例，完全可见时为1，完全不可见时小于等于0。

threshold1：监听阈值的列表，按升序排列，列表中的每个阈值都是监听对象的交叉区域与边界区域的比率。完全可见时为1，完全不可见时小于等于0。

// 目标元素
const el = document.querySelector(".myElement")
const observer = new IntersectionObserver(
  ([e]) =>
    e
      .target
      .classList
      .toggle(
        "is-pinned",
        e.intersectionRatio < 1
      ),
  {
    threshold: [1] 
  }
)
// 监听
observer.observe(el)

/* sticky 元素 */
.myElement {
  position: sticky;
  top: -1px;
}
/* 固定定位状态的样式 */
.is-pinned {
  color: red;
}

如果给处于固定定位时的 sticky 元素加阴影，有 CSS 的解决方案: 带阴影的 CSS Sticky。

参考

• How to Detect When a Sticky Element Gets Pinned
• Intersection Observer MDN
• 带阴影的 CSS Sticky