单词sticky的中文意思是“粘性的”,position:sticky表现也符合这个粘性的表现。基本上,可以看出是position:relative和position:fixed的结合体。当元素在屏幕内,表现为relative,就要滚出显示器屏幕的时候,表现为 fixed。例如,可以标题吸顶。其中导航元素CSS如下:

nav{position: sticky;top: 0;}

table冻结表头

于是,正如大家看到,随着页面的滚动,当导航距离上边缘 0 距离的时候,黏在了上边缘,表现如同position:fixed。可以实现富有层次的滚动交互,比如下面:

1.实现表头固定,冻结表头

2.总结

元素根据正常文档流进行定位,然后相对它的最近滚动祖先(nearest scrolling ancestor)和 containing block (最近块级祖先nearest block-level ancestor),包括table-related元素,基于top, right, bottom, 和left的值进行偏移。偏移值不会影响任何其他元素的位置。

该值总是创建一个新的层叠上下文(stacking context)。注意,一个sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上(当该祖先的overflow是hidden, scroll, auto, 或overlay 时),即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为。