css中sticky属性有什么特点

说明

1、这个元素并不脱离文档流，仍然保留着元素在文档流中的原始位置。

2、当元素在容器中滚动超过指定偏移值时，元素固定在容器的指定位置。

也就是说，如果你设置了top:50px，当sticky元素到达相对定位元素顶部50px的位置时，固定，不再向上移动。

3、固定元素的相对偏移是相对于最接近它的带滚动框的祖先元素。

如果祖先元素不能滚动，则相对于viewport来计算元素的偏移。

实例

html,body{
margin: 0;
padding: 0;
}
.fixed{
line-height: 40px;
display: flex;
position: -webkit-sticky;
position: sticky;/*兼容*/
top: 0;
left: 0;
}
.fixed li{
flex: 1;
text-align: center;
background-color: #61b0ef;
}
ul{
padding: 0;
}
li{
list-style: none;
}




第1行
第2行
第3行
第4行
第5行


tab1
tab2
tab3
tab4


第1行
第2行
第3行
第4行
第1行
第2行
第3行
第4行
第1行
第2行
第3行
第4行
第1行
第2行
第3行
第4行
第1行
第2行
第3行
第4行
第1行
第2行
第3行
第4行
第1行
第2行
第3行
第4行
第1行
第2行
第3行
第4行
第1行
第2行
第3行
第4行
第1行
第2行
第3行
第4行
第1行
第2行
第3行
第4行

以上就是css中sticky属性的特点，希望对大家有所帮助。更多css学习指路：css教程

本文教程操作环境：windows7系统、css3版，DELL G3电脑。