position: sticky 防坑指南

position: sticky 防坑指南：https://www.jianshu.com/p/e217905e8b87

 

今天在写小程序项目的时候碰到一个需求是要把轮播图下面的标签栏滑动到顶部后固定，类似网易考拉小程序这种效果：

image.png

，刚开始是准备使用，js计算距离顶部高度，然后使用position：fixed,来实现的。在使用scroll-view，计算scrollTop的值，当scrollTop大于190时，添加样式position：fixed，但是这个方法在真机测试的时候有会性能问题，造成页面卡顿，后来换成onPageScroll方法，效果还是不理想。
在百度的时候的，看到position有一个sticky属性可以实现类似效果。

sticky 的本意是粘糊糊的,但在 css 中的表现更像是吸附。常见的吸顶、吸底(移动端网站的头部返回栏,底部切换栏之类)的效果用这个属性非常适合。例如下图中的导航,也可以点链接看实际效果。
代码如下：

.sticky { 
  position: sticky; 
  position: -webkit-sticky; 
  top: 0; 
} 

兼容性：

image.png

特性（坑）：
1.sticky不会触发BFC，
2.z-index无效，
3.当父元素的height：100%时，页面滑动到一定高度之后sticky属性会失效。
4.父元素不能有overflow:hidden或者overflow:auto属性。
5.父元素高度不能低于sticky高度，必须指定top、bottom、left、right4个值之一。

作者：fuheideMayuyu
链接：https://www.jianshu.com/p/e217905e8b87
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。