好用不难的粘性布局 position:sticky

野性酷女 2023-05-30 04:58 14阅读 0赞

## 背景 ##

最近项目中遇到一个需求大体是在一个复杂表格中实现滚动的时候，第一行是置顶固定不动，其余行正常滚动，有点类似于表格左右滚动的时候设置了固定列的效果一样。但是在现在的ui库中不管是antd, ele ui还是material-ui中都没有设置固定行的效果，最多是可以设置固定列。后来在github上了解到 antd 不做这种效果的原因是这样会多出很多复杂的计算，担心会影响页面性能，后来就用position:sticky; 来实现这种展示效果。发现这个属性比较冷门，但确实好用。所以记录一下。

### 效果 ###

先看最终达成的页面效果:  
![在这里插入图片描述][20191107152652766.gif]  
可以看到随着表格的滚动，第一行的数据(总计那一行)始终置顶并没有随着其他行的数据一起向上滚动。这样的业务场景就非常适合使用粘性布局来实现。

## position:sticky ##

这个属性的表现有点像position:relative;和position:absolute;的结合体，设置了该属性的盒子首先会根据正常流计算其在文档中的位置，一旦达到了你设置的某个阀值，就会相对他的 containing block（最近的块级祖先元素）来定位(这时候表象的就像 absolute一样)。而这里设置的阈值一般都是top, bottom, left, right 其中之一。  
看几个例子就能理解其中意思：  
![在这里插入图片描述][20191107153940491.gif]  
![在这里插入图片描述][20191107154209409.gif]  
线上demo地址：  
[demo1][]  
[demo2][]

可以看到上面的滚动盒子中一旦到达了距离顶部10px的位置的时候 target box就会附着在上面，并不会随着其余的盒子一起向上滚动。如果同时设置了right,和left的阈值，那这个盒子就会一直在父元素的视口之内，从而达到类似demo2的效果。

有的时候可以利用这个属性的特性来达到一些特别的效果，比如下面这个类似查字典的效果，可以看到当前查阅的是那个字母开头的单词，如果字母下还有单词展示，那么该字母就会一直显示在顶部，直至最后没有要展示的单词，才会跟随一起向上滚动消失在视口中。  
![在这里插入图片描述][2019110715504517.gif]  
[点我查看线上demo地址][demo]

当然在表格中的这个效果不仅仅局限第一行，我们可以设置任一一行或者多行达到这种效果，如下面所示，第一行和第三行开始是正常显示，随着用户向上滚动，可以利用 sticky 实现第一行和第三行置顶在表格的上面。  
![在这里插入图片描述][20191107155548906.gif]  
[点我查看线上demo][demo 1]

关键的代码其实就那么一两行，代码在上述的在线demo中都有，这里贴一下最关键的代码：

.target{ 
                background-color: burlywood;
                position: -webkit-sticky;
                position: sticky;	// 粘性布局
                top: 20px;		// 设置的阈值
            }

记得 webkit 内核的要添加上私有前缀 -webkit-

## 兼容性 ##

功能其实挺好用的，而且简单，看一下兼容性如何：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_16_color_FFFFFF_t_70]  
其实兼容性还算挺好的，各个浏览器 ff chrome edge都支持，除了让人头疼的IE浏览器…┭┮﹏┭┮

[20191107152652766.gif]: https://img-blog.csdnimg.cn/20191107152652766.gif
[20191107153940491.gif]: https://img-blog.csdnimg.cn/20191107153940491.gif
[20191107154209409.gif]: https://img-blog.csdnimg.cn/20191107154209409.gif
[demo1]: https://codesandbox.io/s/sticky-h2-u5l1q
[demo2]: https://codesandbox.io/s/sticky-h1-4o1x2
[2019110715504517.gif]: https://img-blog.csdnimg.cn/2019110715504517.gif
[demo]: https://codesandbox.io/s/sticky-zimu-lkxbb
[20191107155548906.gif]: https://img-blog.csdnimg.cn/20191107155548906.gif
[demo 1]: https://codesandbox.io/s/magical-cdn-xie0n
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191107160120774.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODA4MDU3Mw==,size_16,color_FFFFFF,t_70