亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

第 003 期 如何探測 sticky 定位的元素是否處于 固定定位(Pined)狀態

標簽:
CSS3

场景描述

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。

點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
Web前端工程師
手記
粉絲
115
獲贊與收藏
6940

關注作者,訂閱最新文章

閱讀免費教程

  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消