我不是最后一个知道的:position: sticky
position 的含义是指定位类型,取值类型可以有:static、relative、absolute、fixed、inherit 和 sticky,这里 sticky 是 CSS3 新发布的一个属性。
关于这里只讲述 sticky 的用法,关于 sticky:
设置了 position: sticky 的元素并不脱离文档流,仍然保留元素原本在文档流中的位置。
当元素在容器中被滚动超过指定的偏移值时,元素在容器内固定在指定位置。亦即如果你设置了 top: 50px,那么在 sticky 元素到达距离相对定位的元素顶部 50px 的位置时固定,不再向上移动(相当于此时 fixed 定位)。
元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素,如果祖先元素都不可以滚动,那么是相对于 viewport 来计算元素的偏移量。
在 web 开发中注意兼容性:
sticky 目前仍是一个试验性的属性,并不是 W3C 推荐的标准。它之所以会出现,也是因为监听 scroll 事件来实现粘性布局使浏览器进入慢滚动的模式,这与浏览器想要通过硬件加速来提升滚动的体验是相悖的。具体情况可以看下图,基本上可以说这个属性使用的浏览器只有 FireFox 和 iOS 的 Safari
小程序自定义导航栏中使用 sticky:
sticky 是可以再小程序端生效的!亲测这个属性在自定义导航时特别适用,我也是在纠结自定义导航的 fixed 适配占位问题时才了解到这个属性。