手记

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

场景描述

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

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

解决方案

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

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

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

以下是具体的代码实现:

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

**threshold[1]:**监听阈值的列表,按升序排列,列表中的每个阈值都是监听对象的交叉区域与边界区域的比率。完全可见时为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。

0人推荐
随时随地看视频
慕课网APP