当前位置: 首页 > Web前端 > CSS

CSS中的position属性(sticky)

时间:2023-03-30 13:28:36 CSS

我不是最后一个知道的:,其中sticky是CSS3新发布的一个属性。这里只描述sticky的用法,关于sticky:设置了position:sticky的元素并没有脱离文档流,仍然保留元素在文档流中的原始位置。当元素在容器中滚动超出指定的偏移量时,元素将固定在容器中的指定位置。即如果设置了top:50px,那么当sticky元素到达相对定位元素顶部50px的位置时,它就会固定,不会向上移动(此时相当于fixed定位)。元素的固定相对偏移量是相对于其最近的带有滚动框的祖先元素。如果没有一个祖先元素可以滚动,则计算元素相对于视口的偏移量。Web开发中要注意兼容性:sticky还是一个实验性的属性,不是W3C推荐的标准。之所以出现,也是因为监听滚动事件实现粘性布局,让浏览器进入慢速滚动模式,这与浏览器希望通过硬件加速提升滚动体验的愿望背道而驰。具体情况见下图。基本上,可以说只有FireFox和iOSSafari小程序使用了此属性的浏览器。Sticky用于自定义导航栏:sticky可以在小程序端生效!我亲测这个属性在自定义导航的时候特别适用。我也是在纠结自定义导航的固定适配的时候才了解到这个属性的。