在CSS中,定位一直是我们比较关注的一个属性。其中有一个值叫做sticky,顾名思义,它是一种“粘性定位”。 position: sticky; top: 0px; /* 下同 */ 它的原理并不难理
在CSS中,定位一直是我们比较关注的一个属性。其中有一个值叫做sticky
,顾名思义,它是一种“粘性定位”。
position: sticky; top: 0px; /* 下同 */
它的原理并不难理解——在元素在滚动过程中,当元素触及一定的offset
时(top
或left
),它就会停止滚动,一直保持在这个位置,直到到达父元素的边缘。
简单解释一下,比如一个固定高度加overflow:scroll
的元素区域,其中有多个元素,其中第一个元素的高度大于整个区域的高度,并放置在区域的顶部,如果第一个元素是一个sticky定位的元素,那么它会在整个区域滚动时一直保持在区域的顶部,直到它被滚动出区域,这个时候,它就会固定在区域的底部。
在兼容性上,sticky
值目前已经得到了广泛的支持,唯一需要注意的就是某些版本的IE和IOS Safari,需要加上-webkit-sticky
前缀。
粉丝
0
关注
0
收藏
0