CSS Sticky 其实很简单 | sticky css
为什么要写这篇文章Sticky也不是新知识点了,写这篇文章的原因是由于最近在实现效果的过程中,发现我对Sticky的理解有偏差,代码执行结果不如预期。决定写篇文章重新学习一次。什么是StickySticky(MDN翻译成粘性效果)是CSS属性position中的一个可选值。跟我们用得比较多的static,fixed,relative,absolute一样,用来描述元素的定位方式。从效果上看,Sticky像是混合体,页面滑动到“临界点”之前表现为relative,到达“临界点”时表现为fixed。如何使用使用CSSSticky只需要两个条件。position:sticky;top:0;//right/bottom/left任一有效...
为什么要写这篇文章Sticky 也不是新知识点了,写这篇文章的原因是由于最近在实现效果的过程中,发现我对 Sticky 的理解有偏差,代码执行结果不如预期。决定写篇文章重新学习一次。
什么是 StickySticky (MDN 翻译成粘性效果)是 CSS 属性 position 中的一个可选值。跟我们用得比较多的 static, fixed,relative,absolute 一样,用来描述元素的定位方式。
从效果上看,Sticky 像是混合体,页面滑动到“临界点”之前表现为 relative, 到达“临界点”时表现为 fixed。
如何使用使用 CSS Sticky 只需要两个条件。
position: sticky; top: 0; // right/bottom/left 任一有效值,甚至可以为负像素值 复制代码top:0 意思是当元素滑动到距离视口 0px 时再继续滑动,元素吸顶。可以在 这里[1] 看效果(试试看修改 top 值)
对比 JS 的实现方案没有 CSS Sticky 之前,类似的效果都是使用 JS 实现。大致步骤如下:
监听滚动事件,计算目标元素距离视口的距离。 距离不满足条件时,按兵不动。 距离满足条件时,创建占位元素,修改目标元素定位方式为 fixed。 window.addEventListener(scroll, () => { const rect = elem.getBoundingClientRect(); }) 复制代码在 npm 上搜 sticky 关键字,也有很多优秀的包可以使用。以 react-sticky 为例,满足条件时会创建 placeholder 元素(防止页面抖动),同时让 header 定位为 fixed。 [2]
右边是 Chrome Dev-Tools 的 layers 面板,蓝色部分为生成的 placeholder。
两种方案的火焰图对比(为了放大效果,我把 cpu 调慢了 6 倍)
CSS 方案使用 CSS Sticky,工作都交给 GPU 了,不占用 JS 主线程的资源,在移动端上异常流畅。
...