吸顶Sticky
样式与布局基础滚动到指定位置后暂时固定元素
先知道
吸顶让表头、分组标题或筛选栏平时跟随页面，滚到边缘后保持可见。它会受到滚动容器和父级边界限制；没有足够滚动空间时，也看不到吸附效果。
🔥 热门组件
按钮 Button
输入框 Input
卡片 Card
🧭 页面导航
导航菜单 Menu
分页 Pagination
面包屑 Breadcrumb
什么时候用
- 表格 Table 长表格表头：滚到底也知道每列是什么
- 列表分组标题：通讯录字母、日期分组依次接力
- 筛选栏、顶部导航栏 Navbar：滚到顶部才吸住筛选栏 · sticky 吸顶
- 必配 top 阈值：position: sticky; top: 0position: sticky; top: 0;
什么时候不用
- 父元素 overflow: hidden：sticky 静默失效父容器：overflow: hidden里面的 sticky 直接失效最常见的踩坑，先查父级 overflow
- 用 fixed 模拟吸顶：脱离文档流，不是挡内容就是留洞fixed 栏fixed 脱离文档流，把第一行内容盖住了
- 吸顶元素没背景色：滚过的内容透上来叠一起透明背景的吸顶标题
- 一屏吸好几层：导航、筛选、表头全吸住，内容没处看吸顶导航吸顶筛选吸顶表头
组成结构 · Anatomy
top: 0在文档流里占位，不遮别人
1滚动容器Scroll Containersticky 相对最近的滚动祖先吸附
2吸顶元素Sticky Element写上 position: sticky 的那个元素
3吸附阈值top / bottom滚到距边缘多远时吸住，不写就不生效
4文档流占位In Flow吸住后原来的位置还留着，内容不被遮挡
常见变体 · Variants
吸顶Sticky Top
表头、导航滚到顶就吸住
吸底Sticky Bottom
底部操作栏滚到底才贴住
分组接力Group Headers
通讯录字母、日期分组标题
典型使用场景
长表格吸顶表头
任务负责人状态
登录页改版林小hu进行中
支付流程走查阿凯已完成
设计规范 v2 归档白老师未开始
通讯录字母分组
A
阿凯前端
阿May运营
B
白老师设计
吸顶筛选栏与导航
近地铁
可做饭
山居民宿 · 云顶
大理 · 古城东门 · ¥688/晚
林间木屋 · 溪谷
莫干山 · 庾村 · ¥520/晚
底部吸底操作栏
夏日海边明信片套装 ×1
¥ 39.00
猫咪摄影集《窗台上的光》 ×1
¥ 128.00
城市漫步地图 · 广州 ×2
¥ 58.00
合计 ¥ 283.00