position：sticky粘性布局

position：sticky粘性布局

作用

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

生效条件

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

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

兼容性

• [ ] IE11
• [x] edge
• [x] chrome
• [x] firxfox
• [x] safari

Q: 如何兼容IE11？

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

Q: Safari中无效如何解决？

A: 使用posititon :-webkit-sticky;

能够解决哪些问题？

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

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