CSS中position属性(sticky)
我不是最后一个知道的: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适配占位问题时才了解到这个属性。