【后知后觉系列】css position: sticky 属性以及某些场景的使用

最近公司在用 Regular 封装一个表格组件，需要实现固定表头的功能。这个是几乎所有的组件库都会实现的一个效果，所以实现方式有很多种：

1. 因为 thead/tr 的 position 属性是无效的，所以需要单独用 div 创建一个表头。然后设置这个表头的 position: absolute ，同时 top: 0 。同时这种模式下，需要用户指定每一列的宽度，保证自制的表头和下面原生的表格一一对应起来。如果不指定的话，也可以等待 dom 渲染完成之后，再测量宽度。比如 Ant Design 就是使用的这种方式。
2. 因为上面那种方案的难点在于无法很好的保证自制表头和原生表格宽度的一致性，所以我们组的大佬提出了使用原生 thead，监听 scroll 事件，设置 transform 属性使得表头进行偏移，从而实现 fixHeader 的问题，这种方式解决了第一个的问题，但是需要手动监听 scroll 事件，在快速滚动的情况下，可能会有一定的性能问题。而且不够优雅

不管是哪种方式，我总感觉不是很完美，于是我就在思考，除了手动更新的方式，难道就没有一些比较好的方式去做。然后我就去翻看了 github 的固定表头的方式，于是就延伸出了这篇文章， position: sticky 属性。

Pay Attention：后面所讲的内容就不怎么和表格固定表头相关，如果你对表格固定表头或者固定列有一定问题，可以查看网易考拉的这篇文章 《一起来聊聊table组件的固定列》 。

当第一眼看到这个熟悉的时候，第一句话就是“我 CA”，这 TMD 是什么鬼属性，position 什么时候有了这个属性。于是去看了MDN 的介绍，我们可以理解为，这个属性是 实现固定顶部最简单的实现方式 。

他其实是一种 position:relative 和 position: fixed 的结合体，一定要配合 top/right/bottom/left 的属性一起才有作用，设置对应方向的最小值。当大于最小值的时候，他就像 relative 一样，作为文档流的一部分，并且 top/right/bottom/left 属性也会失效。否则当小于设置的值的时候表现的像 fixed ，只不过这个 fixed 不再现对于窗口，而是相对于最近的可滚动块级元素。

如果你看过其他关于 sticky 的文章，大部分都会以黏贴的意思来解释他，那么很明显，确实也是这个意思，如果你觉得看了其他教程能够清楚的话，那么可以不用看我这篇了，如果你没看懂的话，估计我这篇你还是看不懂。

废话少说，我们先来看一下如何正确使用 sticky。

正确的使用姿势

以下的代码预览请使用最新 Chrome 查看，或者支持 position: sticky 的浏览器查看

1. position: sticky 只相对于第一个有滚动的父级块元素（scrolling mechanism，通过 overflow 设置为 overflow/scroll/auto/overlay 的元素），而不是父级块元素。

   See the Pen position sticky 相对于最外面的可滚动父级 by Bradley Xu (@xgheaven) onCodePen.

2. position: sticky 只有当设置对应的方向(top/right/bottom/left)，才会有作用，并且可以互相叠加，可以同时设置四个方向。

3. 即使设置了 position: sticky ，也只能显示在父级块元素的内容区域，他无法超出这个区域，除非你设置了负数的值。

4. position: sticky 并不会触发 BFC，简单来讲就是计算高度的时候不会计算 float 元素。

5. 当设置了 position: sticky 之后，内部的定位会相对于这个元素

   See the Pen position sticky 内部绝对定位相对于这个元素 by Bradley Xu (@xgheaven) onCodePen.

当你懂了这几个之后，其实这个属性就可以用起来很简单了。

举个栗子 - 通讯录列表头部

no code no bb，直接上代码。

.

拓展思考

如何检测是否已经被固定？

最常见的需求就是，当还在文档流当中的时候，正常显示，但是当固定住的时候，添加一些阴影或者修改高度等操作。要想实现这个效果，第一反应可能就是手动监听 scroll 事件，判断位置，这当然是没有问题的，但是随之而来的确实性能的损耗。

于是我们可以使用 IntersectionObserver 作为我们的辅助工具，这是一个可以监听一个元素是否显示在视窗之内的 API，具体内容见阮老师的 《IntersectionObserver API 使用教程》 。基本原理就是在一段滚动的头部和尾部分别添加两个岗哨，然后通过判断这两个岗哨的出现和消失的时机，来判断元素是否已经被固定。

例子 详见此处