sticky黏顶须知

如下设置让元素黏顶

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

sticky的使用条件

  1. 父元素不能overflow:hidden或者overflow:auto属性。
  2. 必须指定top、bottom、left、right4个值之一,否则只会处于相对定位
  3. 父元素的高度不能低于sticky元素的高度
  4. sticky元素仅在其父元素内生效

特性(坑)

  1. sticky 不会触发 BFC。如果不知道 BFC 可以看这里
  2. 样式表 z-index 无效。行内 style 写有效。
  3. sticky 是容器相关的,也就说 sticky 的特性只会在他所处的容器里生效。前往查看demo
    强调这一点是因为在实际使用中,碰到 body 设置 height: 100% 的时候 sticky 元素停在某一个位置不动了。

总结

使用sticky去完成黏顶的业务时,因为ios的支持度很高,但是大部分安卓手机不支持该属性,需要降级处理。可以通过监听scollTop去动态更新组件的定位(根据位置动态变化fix/absolute)
当有子元素有sticky时要慎重设置height: 100%以及overflow(会失效)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。