position：sticky粘性布局
作用
- 它是相對定位
position:relative和固定定位position:fixed的混合益缎。在屏幕范圍時(shí)該元素并不受到定位的影響（left、top等屬性）锉矢，當(dāng)該元素將要滾動(dòng)到某一閾值點(diǎn)(例：top:10px;)询吴，根據(jù)left、top等屬性成固定定位fixed的效果爆捞。 - 不再用監(jiān)聽scroll事件奉瘤，既可實(shí)現(xiàn)導(dǎo)航欄滾動(dòng)絕對定位的效果
生效條件
- 父元素不能
overflow:hidden或者overflow:auto屬性 - 必須指定
top煮甥、bottom盗温、left、right4個(gè)值之一成肘，否則只會(huì)處于相對定位 - 父元素的高度不能低于sticky元素的高度
- sticky元素僅在其父元素內(nèi)生效
注意：該元素不脫離文檔流砚偶，仍然保留元素原本在文檔流中的位置
兼容性
- [ ] IE11
- [x] edge
- [x] chrome
- [x] firxfox
- [x] safari
Q: 如何兼容IE11？
A: 使用
position: fixed;,或者使用sticky填充包Q: Safari中無效如何解決？
A: 使用
posititon :-webkit-sticky;
能夠解決哪些問題囤萤？
-
當(dāng)元素使用
transform屬性時(shí)，會(huì)限制position:fixed的跟隨效果肛搬，這時(shí)可以使用position:sticky來兼容fixed定位這個(gè)影響只出現(xiàn)在chrome和firefox中
