一句话描述
position: sticky
的作用:让sticky元素在不超出包含块(containing block)的前提下尽可能展示在最近滚动祖先元素(nearest scrollport)的视口内。
怎么判断最近滚动祖先元素?
祖先元素中有overflow
属性值不是visible
和clip
的都是滚动元素,其中包括:scroll,hidden和auto
。
auto和scroll值会导致元素变成滚动元素好理解,为啥hidden也会导致元素变成滚动元素?
因为overflow: hidden
虽然不能通过鼠标键盘等方式直接滚动元素中的内容,但是可以通过编程的方式来滚动元素的内容,所以overflow: hidden
也会导致元素变成滚动元素。
什么是包含块?
有点复杂,简单理解为用于布局和定位的包含元素的矩形。详细参考文档containing block。
细节
在粘性布局中有三个东西参与计算sticky box的位置,分别是粘性限制矩形(sticky view rectangle),最近祖先滚动视口(nearest scrollport)和包含块(containing block)。
粘性限制矩形
通过sticky box的top,bottom,right,left的属性和最近祖先滚动视口计算得出,用于限制sticky box的位置。
例如:最近的滚动视口高300px
,sticky box高200px
,top属性是20px
,所生成的粘性限制矩形的高度就是280px
。但是如果如果最近滚动视口只有100px
高度,sticky box的底边自动会算成-120px
让粘性限制矩形的高度是200px
可以完全包裹住sticky box。
所以粘性限制矩形是针对sticky box而言的,每个ssticky box都有自己对应的粘性限制矩形。而该矩形的大小和位置由最近滚动视口和stick box的top,bottom等属性值共同决定的。当最近祖先滚动元素内滚动时粘性限制矩形并不会跟随内容滚动。
如果sticky box的top有值,而bottom为auto,那么该sticky box永远不会被推动向上移动,只会因为top的限制被推动向下移动,auto可以理解为改边对于sticky box的位置没有限定作用。left和right同理。
图中黑色框是最近滚动元素的可是窗口,绿色是sticky box,浅蓝色为粘性限制矩形,红色为containing-block,而绿色块在什么位置可以sticy是浅蓝色和红色块共同决定的。
参考
sticky-view-rectangle
CSS position:sticky解析
overflow-properties