是什么
粘性定位position sticky
元素采用正常的文档流布局(static
),当其边框(border矩形)相对于最近的滚动祖先元素的内边框(即content矩形)的小于指定阈值时,则position sticky
元素相对于该最近的滚动祖先元素固定位置。
怎么用
要实现粘性定位除了指定position: sticky;
外还需指定阈值,即水平滚动必须指定left/right
,垂直滚动必须指定top/bottom
。
如:
.some-component{
position: sticky;
top: 0px;
}
粘性定位position sticky
可用于实现一些“吸顶”效果
进阶
阈值怎么计算的
比如:
.sticky-btn{
position: sticky;
top: 10px;
}
则表示.sticky-btn
元素的上border矩形边框距离滚动容器的上内边框(即content矩形)边的距离小于10px
时,则元素固定位置。
多个sticky
元素
- 在一个滚动容器里可以存在多个有效的
sticky
元素,sticky
元素之间的行为互相独立; sticky
元素属于定位元素,当多个sticky
元素发生重叠时遵循定位元素的重叠原则。
其他
- 失效的
sticky
元素行为同relative
定位。
失效的sticky
元素
初次使用position: sticky;
总是发现没有达到效果,常见的原因有:
- 水平滚动时检查是否指定
left/right
; - 垂直滚动是检查是否指定
top/bottom
; sticky
元素的某个父元素(或者祖先元素)指定了overflow/overflow-x/overflow-y
属性,且取值是hidden/scroll/auto
;sticky
元素的父元素(不是祖先元素)在滚动元素视口里还不可见。
可以看看这个Demo
兼容性
Can I Use CSS position: sticky
As of 2020, 95% of browsers have some level of support forposition: sticky
Older versions of Safari will require the -webkit vendor-prefix
一般这样写:
position: -webkit-sticky;
position: sticky;
降级方案(polyfill)
如果非得要兼容各个浏览器,则得使用JS实现了。好在已经有很多优秀的库了:
参考
整理自GitHub笔记: 解析position: sticky;
。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。