吸顶Sticky
你可能会说
往下滚的时候，让导航栏一直钉在页面顶部。
吸顶是一种让元素先按正常位置排列、滚动到指定边界后暂时固定显示的 CSS 定位方式position: sticky 让元素平时留在文档流，滚到 top 或 bottom 等阈值后暂时吸附。它受最近滚动祖先和包含块边界限制；祖先的 overflow 可能改变它跟随的滚动容器，容器没有足够滚动距离时也看不到效果。使用时还要设置相应偏移值。
组成结构 · Anatomy
top: 0在文档流里占位，不遮别人
sticky 相对最近的滚动祖先吸附
写上 position: sticky 的那个元素
滚到距边缘多远时吸住，不写就不生效
吸住后原来的位置还留着，内容不被遮挡
常见变体 · 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
延伸阅读 · 权威出处