Css position:sticky 初探

Posted 2023-04-28

参考技术A *sticky属性 与relative类似 但是其offset实根据最近的拥有scrolling box的先祖元素来确定的，如果没有拥有scrolling box的话会根据viewport来计算

那么什么是scrolling box呢？

An html scrollbox is basically a box with scrollbars. Usually the scrollbox is made using the HTML  <div>  tag and the scrollbars are defined using the CSS overflow property. （From https://www.html.am/html-codes/scrollboxes/html-scrollbox.cfm ）

姑且理解为

含有滚动条的或者含有overflow属性的皆为scroll box(试了下当设置为auto,overlay,sroll的时候会产生效果，估计就是所谓的scroll box)

实践：

1.设置父元素overflow:auto,子元素设置为sticky且top:10px;

可以看到sticky的元素根据距其最近的具备scoll box的父元素计算offset

2.去除overflow:auto

可以看到之前设置的top属性无效了,找不到先祖元素为scrollbox的了，故基于viewport来计算offset:

看到有些文章说设置overflow:auto或者hidden不会生效，特地试了下发现是有效的..很疑惑。

1.auto

2.hidden

可以看到定位属性还是产生了效果。（到底是sticky还在生效还是已经类似于relative效果，待研究）

还是基于父元素为scroll box:

1.对于块级兄弟元素(位于普通文档流中)

前一个节点为block元素，自身为sticky，不会覆盖前面普通文档流中的元素

2.对于块级兄弟元素(脱离文档流:：float)

对于脱离文档流的元素(float或者absolute)会直接按祖先元素的顶部开始计算

sticky VS fixed

1.先来看 fixed

2.再来看sticky, 去除父元素overflow（使之根据viewport计算）

可以看到当给其父元素设置固定高度后，sticky元素会受制于父元素的高度，即最多到达父元素的底部

浏览器兼容性：

*仅为个人学习之用

Ref: https://www.w3.org/TR/css-position-3/#sticky-position

css3中position:sticky 新属性

关于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如下:

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