背景
最近项目中遇到一个需求大体是在一个复杂表格中实现滚动的时候，第一行是置顶固定不动，其余行正常滚动，有点类似于表格左右滚动的时候设置了固定列的效果一样。但是在现在的ui库中不管是antd, ele ui还是material-ui中都没有设置固定行的效果，最多是可以设置固定列。后来在github上了解到 antd 不做这种效果的原因是这样会多出很多复杂的计算，担心会影响页面性能，后来就用position:sticky; 来实现这种展示效果。发现这个属性比较冷门，但确实好用。所以记录一下。
效果
先看最终达成的页面效果:
可以看到随着表格的滚动，第一行的数据(总计那一行)始终置顶并没有随着其他行的数据一起向上滚动。这样的业务场景就非常适合使用粘性布局来实现。
position:sticky
这个属性的表现有点像position:relative;和position:absolute;的结合体，设置了该属性的盒子首先会根据正常流计算其在文档中的位置，一旦达到了你设置的某个阀值，就会相对他的 containing block（最近的块级祖先元素）来定位(这时候表象的就像 absolute一样)。而这里设置的阈值一般都是top, bottom, left, right 其中之一。
看几个例子就能理解其中意思：
线上demo地址：
demo1
demo2
可以看到上面的滚动盒子中一旦到达了距离顶部10px的位置的时候 target box就会附着在上面，并不会随着其余的盒子一起向上滚动。如果同时设置了right,和left的阈值，那这个盒子就会一直在父元素的视口之内，从而达到类似demo2的效果。
有的时候可以利用这个属性的特性来达到一些特别的效果，比如下面这个类似查字典的效果，可以看到当前查阅的是那个字母开头的单词，如果字母下还有单词展示，那么该字母就会一直显示在顶部，直至最后没有要展示的单词，才会跟随一起向上滚动消失在视口中。
点我查看线上demo地址
当然在表格中的这个效果不仅仅局限第一行，我们可以设置任一一行或者多行达到这种效果，如下面所示，第一行和第三行开始是正常显示，随着用户向上滚动，可以利用 sticky 实现第一行和第三行置顶在表格的上面。
点我查看线上demo
关键的代码其实就那么一两行，代码在上述的在线demo中都有，这里贴一下最关键的代码：
.target{
background-color: burlywood;
position: -webkit-sticky;
position: sticky; // 粘性布局
top: 20px; // 设置的阈值
}
记得 webkit 内核的要添加上私有前缀 -webkit-
兼容性
功能其实挺好用的，而且简单，看一下兼容性如何：
其实兼容性还算挺好的，各个浏览器 ff chrome edge都支持，除了让人头疼的IE浏览器…┭┮﹏┭┮