为什么要写这篇文章

Sticky 也不是新知识点了,写这篇文章的原因是由于最近在实现效果的过程中,发现我对 Sticky 的理解有偏差,代码执行结果不如预期。决定写篇文章重新学习一次。

什么是 Sticky

Sticky (MDN 翻译成粘性效果)是 CSS 属性 position 中的一个可选值。跟我们用得比较多的 static, fixedrelativeabsolute 一样,用来描述元素的定位方式。

从效果上看,Sticky 像是混合体,页面滑动到“临界点”之前表现为 relative, 到达“临界点”时表现为 fixed

如何使用

使用 CSS Sticky 只需要两个条件。

position: sticky;
top: 0; // right/bottom/left 任一有效值,甚至可以为负像素值
复制代码

top:0 意思是当元素滑动到距离视口 0px 时再继续滑动,元素吸顶。可以在 这里 看效果(试试看修改 top 值)

对比 JS 的实现方案

没有 CSS Sticky 之前,类似的效果都是使用 JS 实现。大致步骤如下:

  1. 监听滚动事件,计算目标元素距离视口的距离。
  2. 距离不满足条件时,按兵不动。
  3. 距离满足条件时,创建占位元素,修改目标元素定位方式为 fixed
window.addEventListener('scroll', () => {
const rect = elem.getBoundingClientRect();
// 计算目标元素和视口的距离
})
复制代码

在 npm 上搜 sticky 关键字,也有很多优秀的包可以使用。以 react-sticky 为例,满足条件时会创建 placeholder 元素(防止页面抖动),同时让 header 定位为 fixed

右边是 Chrome Dev-Toolslayers 面板,蓝色部分为生成的 placeholder

两种方案的火焰图对比(为了放大效果,我把 cpu 调慢了 6 倍)

CSS 方案

使用 CSS Sticky,工作都交给 GPU 了,不占用 JS 主线程的资源,在移动端上异常流畅。

React Sticky

由于需要在 scroll event 回调中不断调用 getBoundingClientRect,而 getBoundingClientRect 又会触发页面重排重绘,稍不留神就掉帧卡顿。仅仅为了实现这个效果(页面上没有其他内容)大动干戈性价比很低。

结论是:实现 Sticky 效果,优先选择 CSS Sticky

理解上的偏差

1. 只在 Containing Block 内有效。

修改例子,用一个 div 把 Sticky Header 包裹起来,发现 Sticky 效果失效了!!!

  ...
<div class="wrapper">
<header>Sticky Header</header>
</div>
...
复制代码

根据文档,Sticky 效果只在 Containing Block 内有效,Containing Block 滑出屏幕时,Stickey Element 也跟着滑走。

修改 wrapper 的高度,看效果。

.wrapper {
height: 100px;
background-color: #e6e6e6;
}
复制代码

多个 Sticky Element 放在一块就有了前一个被后一个顶出去的特效,实际上并不是真的被顶出去,而是 Containing Block 把它拖走。

代码看这里

2. Overflow 会影响 Sticky

修改例子中的代码,给 #root 加上 overflow: auto

#root {
overflow: auto;
}
复制代码

Sticky 效果再次丢失(overflow 设置为其他非 visible 的有效值也是同样效果。)

看了很多相关的文档,我的出来的结论是:

Sticky Element 的 offset 值是依据 nearest scrolling ancestor (距离最近的滚动祖先) 计算的,如果没有匹配上的祖先元素,则使用视口作为参照物。

问题就出在 overflow-x 或者 overflow-y 其中任一为非 visible 则认为是要找的目标元素,而在滚动窗口的过程中,Sticky Element 和 它找到的目标祖先元素的 offset 值一直没有改变,所以 Sticky 不起作用。

对症下药,让滚动发生在被“误匹配”上的祖先元素内即可恢复 Sticky Effect

#root {
overflow: auto;
height: 100vh;
}
复制代码

兼容性

算上 prefixed ,当前 css sticky 手机端兼容性达到 94.14%,如果你所做的业务需要照顾剩下 5.86% 的用户,也可以使用 polyfill 或者 position: fixed

相关链接

作者:HelKyle
链接:https://juejin.im/post/5cde75636fb9a07ef562048a
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

CSS Sticky 其实很简单的更多相关文章

  1. 一个神奇却很简单的css特效

    在网上看到一个前端大牛的主页,觉得他有一个特效特别酷,一开始还以为是要用什么javascript代码来实现,但仔细看一下,发觉只是用几行css代码就搞定了,我觉得挺好的. 他这个效果就是鼠标放在左半部 ...

  2. CSS Sticky Footer

    ----CSS Sticky Footer 当正文内容很少时,底部位于窗口最下面.当改变窗口高度时,不会出现重叠问题. ----另一个解决方法是使用:flexBox布局  http://www.w3c ...

  3. 手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单

    手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单   手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单 手把手教你开发Chrome扩 ...

  4. js便签笔记(13)——jsonp其实很简单【ajax跨域请求】

    前两天被问到ajax跨域如何解决,还真被问住了,光知道有个什么jsonp,迷迷糊糊的没有说上来.抱着有问题必须解决的态度,我看了许多资料,原来如此... 为何一直知道jsonp,但一直迷迷糊糊的不明白 ...

  5. jquery实现很简单的DIV拖动

    今天用jquery实现了一个很简单的拖动...实现思路很简单  如下: 在thickbox 弹出层内实现拖拽DIV,那么得进行一下相对宽高的运算:必须加上相对于可见窗口宽高和弹出层宽高之间的差:    ...

  6. jsonp其实很简单【ajax跨域请求】

    js便签笔记(13)——jsonp其实很简单[ajax跨域请求] 前两天被问到ajax跨域如何解决,还真被问住了,光知道有个什么jsonp,迷迷糊糊的没有说上来.抱着有问题必须解决的态度,我看了许多资 ...

  7. css中的em 简单教程 -- 转

    先附上原作的地址: https://www.w3cplus.com/css/px-to-em 习惯性的复制一遍~~~~ -------------------------------我是分界线---- ...

  8. 关于fullpage.js 和animate.css制作全屏简单大方的首页

    附上源码: html <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  9. 我在阿里这仨月 前端开发流程 前端进阶的思考 延伸学习的方式很简单:google 一个关键词你能看到十几篇优秀的博文,再这些博文中寻找新的关键字,直到整个大知识点得到突破

    我在阿里这仨月 Alibaba 试用期是三个月,转眼三个月过去了,也到了转正述职的时间.回想这三个月做过的事情,很多很杂,但还是有重点. 本文谈一谈工作中遇到的各种场景,需要用到的一些前端知识,以及我 ...

随机推荐

  1. vue中如何判断checkbox是否选中

    console.log(event.target.checked)     例:  

  2. 关于ES6的对象扩展运算符

    对象的扩展运算符(...),用于取出参数对象中的所有可遍历属性,然后拷贝到当前对象之中 对象扩展运算符: 1. 复制对象 let obj1 = { x: 1, y: 2, z: 3 } let obj ...

  3. 解决Vivado XSDK在Ubuntu系统上自带UART Terminal Crash问题

    在Ubuntu 18.04 LTS系统上使用某些版本的Vivado XSDK的Eclipse IDE中自带的串口Terminal会有Crash的问题.Xilinx的XSDK的Terminal插件是用的 ...

  4. 【转】DATA_SECTION 和CODE_SECTION 的区别

    请问#pragma DATA_ALIGN有什么作用? 下面是我在EDMA的一个例程中摘录的几句话:#pragma DATA_ALIGN(ping,128);#pragma DATA_ALIGN(pon ...

  5. 不错的DSP和FPGA作者

    https://blog.csdn.net/wordwarwordwar/article/details/90233903

  6. ISCC之RE_REV02

    打开IDA,跟着主函数转了一圈,无果,但是在下面翻到一串base64 base64解码,发现被坑了 this_is_not_the_flag_you_seek_keep_looking 继续翻,发现这 ...

  7. 【转】Java奇技淫巧-插件化注解处理API(Pluggable Annotation Processing API)

    参考资料 JDK6的新特性之六:插入式注解处理API(Pluggable Annotation Processing API) Java Annotation Processing and Creat ...

  8. 使用BERT预训练模型+微调进行文本分类

    本文记录使用BERT预训练模型,修改最顶层softmax层,微调几个epoch,进行文本分类任务. BERT源码 首先BERT源码来自谷歌官方tensorflow版:https://github.co ...

  9. 思想家:一个http接口的设计

    一个简单的接口,反应出来一些简单的思想. auth_token= xxx post  response (命令) 记住:我们是给第3方提供接口,不是自己使用 问题:平时就知道写代码,文档重视不够,有一 ...

  10. dns-prefetch应用好,网上速度能提高一半!

    今天一个朋友给我说在网页上添加dns-prefetch,网页访问速度能提高,于是我百度查询关于dns-prefetch. DNS Prefetch,即DNS预获取,是前端优化的一部分.一般来说,在前端 ...