position: sticky 实现吸顶效果

[pzli]

博客 polyfill

[xinchanghao]

所以，sticky就是position:relative和position:fixed的结合体？？ @pzli

[xinchanghao]

sticky 和 fixed 的区别：

一. fixed 固定定位：

• 元素可以被固定于页面指定位置，始终固定于此位置。
• top、bottom、left与right无需显式设置，fixed定位也会生效。
• 元素的定位参考对象是根元素，不要误以为是距离其最近的定位元素。
• 元素脱离文档流。
• 当前所有主流浏览器都支持此定位方式（不再考虑IE6浏览器）

二.粘性定位：

• 元素可以被固定于页面指定位置，但并不一定始终固定于此位置。
• 必须至少显式设置top、bottom、left与right其中某一个属性值，sticky定位才会生效。
• 元素的定位参考对象距离其最近的overflow属性值为visible的具有滚动条的祖先元素，如果是以body或者body的父辈元素为参考，那么定位参考对象是根元素。
• 元素不会脱离文档流。
• 浏览器兼行当前有点差，不过以后肯定会越来越好。