position:sticky粘性布局

  • Oct, 23 2019
  • CSS

position:sticky粘性布局

position:sticky粘性布局

作用

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

生效条件

  • 父元素不能overflow:hidden或者overflow:auto属性
  • 必须指定topbottomleftright4个值之一,否则只会处于相对定位
  • 父元素的高度不能低于sticky元素的高度
  • sticky元素仅在其父元素内生效

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

兼容性

  • IE11
  • edge
  • chrome
  • firxfox
  • safari

Q: 如何兼容IE11?

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

Q: Safari中无效如何解决?

A: 使用posititon :-webkit-sticky;

能够解决哪些问题?

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

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