我不是最后一个知道的:position: sticky
关于这里只讲述sticky的用法,关于sticky:
- 设置了position: sticky的元素并不脱离文档流,仍然保留元素原本在文档流中的位置。
- 当元素在容器中被滚动超过指定的偏移值时,元素在容器内固定在指定位置。亦即如果你设置了top: 50px,那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定,不再向上移动(相当于此时fixed定位)。
- 元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素,如果祖先元素都不可以滚动,那么是相对于viewport来计算元素的偏移量。
在web开发中注意兼容性:
小程序自定义导航栏中使用sticky:
sticky是可以再小程序端生效的!
亲测这个属性在自定义导航时特别适用,我也是在纠结自定义导航的fixed适配占位问题时才了解到这个属性。