position:sticky粘性布局

position:sticky粘性布局

作用

  • 它是相对定位position:relative和固定定位position:fixed的混合。在屏幕范围时该元素并不受到定位的影响(left、top等属性),当该元素将要滚动到某一阈值点(例:top:10px;),根据left、top等属性成固定定位fixed的效果。

  • 不再用监听scroll事件,既可实现导航栏滚动绝对定位的效果

生效条件

  • 父元素不能overflow:hidden或者overflow:auto属性

  • 必须指定topbottomleftright4个值之一,否则只会处于相对定位

  • 父元素的高度不能低于sticky元素的高度

  • sticky元素仅在其父元素内生效

注意:该元素不脱离文档流,仍然保留元素原本在文档流中的位置

兼容性

Q: 如何兼容IE11?

A: 使用position: fixed;,或者使用sticky填充包

Q: Safari中无效如何解决?

A: 使用posititon :-webkit-sticky;

能够解决哪些问题?

  • 当元素使用transform属性时,会限制position:fixed的跟随效果,这时可以使用position:sticky来兼容fixed定位

    这个影响只出现在chrome和firefox中

Last updated