美文网首页
第 003 期 如何探测 sticky 定位的元素是否处于 固定

第 003 期 如何探测 sticky 定位的元素是否处于 固定

作者: 前端GoGoGo7 | 来源:发表于2021-04-05 22:47 被阅读0次

场景描述

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

参考

相关文章

  • 第 003 期 如何探测 sticky 定位的元素是否处于 固定

    场景描述 sticky 定位的元素,有两个状态:相对定位和固定定位。开发时,有给处于固定定位(Pined)状态 s...

  • sticky吸顶

    position: sticky(粘性定位) 粘性定位 sticky 相当于相对定位 relative 和固定定位...

  • sticky -- position定位属性sticky值之粘性

    sticky简述 sticky 是css定为新增的属性;可以说是相对定位relative和固定定位fixed的结合...

  • CSS方案总结

    一、Sticky Footer效果 无论页面内容高度如何变化,footer始终在页面底部的固定位置 二、垂直居中 ...

  • position:sticky粘性布局

    position:sticky粘性布局 作用 它是相对定位position:relative和固定定位positi...

  • css之z-index属性

    ** z-index只对定位元素有用(relative/absolute/fixed/sticky)** 如果定位...

  • 前端小技能

    ​ 固定定位是否相对的父元素只能是body呢? position:fixed固定定位 用 left、top 都是相...

  • css新增属性position:sticky

    position:sticky是css定位新增属性;可以说是相对定位relative和固定定位fixed的结合;它...

  • css元素居中

    水平居中 这里讨论的水平居中,是针对处于文档流中的元素。绝对定位(absolute),固定定位(fixed),浮动...

  • CSS实现推荐高亮区域

    如何灰色其他DOM元素,只高亮所选元素。 高亮区域position 绝对定位或者固定定位 使用box-shadow...

网友评论

      本文标题:第 003 期 如何探测 sticky 定位的元素是否处于 固定

      本文链接:https://www.haomeiwen.com/subject/falrkltx.html