[分享]css中定位sticky的原理

在CSS中，定位一直是我们比较关注的一个属性。其中有一个值叫做sticky，顾名思义，它是一种“粘性定位”。 : sticky; top: 0px; / 下同 / 它的原理并不难理解——在元素在滚动过...

在CSS中，定位一直是我们比较关注的一个属性。其中有一个值叫做sticky，顾名思义，它是一种“粘性定位”。

 position: sticky;
    top: 0px; /* 下同 */ 

它的原理并不难理解——在元素在滚动过程中，当元素触及一定的offset时（top或left），它就会停止滚动，一直保持在这个位置，直到到达父元素的边缘。

简单解释一下，比如一个固定高度加overflow:scroll的元素区域，其中有多个元素，其中第一个元素的高度大于整个区域的高度，并放置在区域的顶部，如果第一个元素是一个sticky定位的元素，那么它会在整个区域滚动时一直保持在区域的顶部，直到它被滚动出区域，这个时候，它就会固定在区域的底部。

在兼容性上，sticky值目前已经得到了广泛的支持，唯一需要注意的就是某些版本的IE和IOS Safari，需要加上-webkit-sticky前缀。