css3中position:sticky 新属性

Posted 2021-04-09 我是老冯

关于position的属性一般常用的是relative/absolute/fixed

一般不设定position值的情况下, 默认是static.

先总结下常见的属性值:

1、position: static

static(没有定位)是position的默认值，元素处于正常的文档流中，会忽略left、top、right、bottom和z-index属性。

2、position: relative

relative(相对定位)是指给元素设置相对于原本位置的定位，元素并不脱离文档流，因此元素原本的位置会被保留，其他的元素位置不会受到影响。

3、position: absolute

absolute(绝对定位)是指给元素设置绝对的定位，相对定位的对象可以分为两种情况：

1) 设置了absolute的元素如果存在有祖先元素设置了position属性为relative或者absolute，则这时元素的定位对象为此已设置position属性的祖先元素。

2) 如果并没有设置了position属性的祖先元素，则此时相对于body进行定位。

4、position: fixed

简单来说fixed是特殊版的absolute，fixed元素总是相对于body定位的。

5、inherit

继承父元素的position属性，但需要注意的是IE8以及往前的版本都不支持inherit属性。

/////////////重点来了////////////

这次的主角是sticky

从字面意义上理解: sticky 是粘，粘贴的意思，所以先称之为粘性定位。

特性: 设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。

常见应用场景: 导航和背景图等.

如:

1、当给导航条设定为position: sticky; top: 20px;时, 滚动条在移动的过程中, 起初的效果如同是position: relative,跟随着滚动条同时移动, 当top值达到20px后, 效果就像position: fixed;一样,固定在头部不会随滚动条滚动而移动.

2、另一种效果,  想必做前端的小伙伴在浏览一些网站的时候, 也碰到过类似的效果, 就是当滑动页面到达某块区域的时候, 背景图突然被固定, 当划过某块区域后, 背景图突然被解除固定随着滚动条移动.

特点:

1、该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。

2、当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即如果你设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。

3、元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量

缺点:

兼容性有点心塞. 而且在ios上很流畅，但是安卓上，安卓4.4.4以下全军覆没，而且安卓7上也跪了,使用的小伙伴多注意一下

解决方法:

通过判断当前设备是否支持sticky这个属性，如果不支持则替换成fixed和relative定位组合

demo如下:

如果有不理解的地方,可以留言给我, 咱们互相学习沟通.一起进步