sticky
特点
-
该元素并不脱离文档流,仍然保留元素原本在文档流中的位置
-
当元素在容器中被滚动超过指定的偏移值时,元素在容器内会固定在指定位置,sticky属性会由static属性变更成fixed状态, 所以是根据scroll偏移量触发,你可以top、bottom、left、right设置其一,只要达到指定的偏移量,他就会触发变更成fixed。
缺点
唯一缺点可能就是兼容性不好了,但现在都是什么年代了,IE都凉了,IE的痛这个就不用考虑了,大部分浏览器都能正常兼容!
注意
- 此属性依赖于最近的父组件scroll,请确保父元素或父元素以上容器可以滚动,可以用overflow:visible设置,确保不会被overflow:hidden等因素影响其不生效。
- 另外确保设置了top、bottom、left、right其一才能生效。
总结
个人认为此属性相较于fixed最大的优势就是它不会脱离文档流,可以在fixed固定元素的作用前提下还能保证其在文档流中,那么margin设置边距值等其中属性时 是有效的,而不会因为fixed脱离文档流弄得焦头烂额!!!