粘性头部
Sticky Header
页面滚动时头部留在顶部，常配合「下滑隐藏、上滑出现」。
- 又叫：
- 吸顶导航
- 固定顶栏
- 滚动吸顶
- sticky nav
- fixed header
- hide on scroll
- 展厅
- 布局与结构
- 形态
- 自带滚动
- 播放
- 手动触发
- 关键词
- 需要 JS / 随滚动变化 / 合成层动画 / 可以直接用
参数工作台
复制给 AI
随参数实时更新做粘性头部（sticky header）：用 position: sticky; top: 0 吸顶，滚动超过 60px 后给头部加半透明底色和 backdrop-filter: blur(8px) 与一条下边框。向下滚动时用 transform: translateY(-100%) 收起头部，向上滚动立刻显示，判定用当前 scrollY 与上一次 scrollY 比较，动画 250ms ease-out。
sticky header, position: sticky; top: 0, add backdrop-filter: blur(8px) and border-bottom after 60px scroll, hide on scroll down / reveal on scroll up via transform: translateY(-100%) with 250ms ease-out, compare current vs previous scrollY, animate transform only, throttle scroll handler with requestAnimationFrame
https://publieople.github.io/design-museum/entry/sticky-header/?stage=light
链接带着你调好的参数
什么时候用
- 长页面里希望导航和主要操作始终可用
- 需要随时让用户看到购物车、搜索或当前章节
- 内容很长又不想一直占着一条顶栏时，用下滑隐藏换回阅读空间
适用场景：导航 / 页面 / 滚动
推荐取值
- 吸附阈值
- 60–120px 滚动距离
- 出现/隐藏时长
- 200–300ms
- 吸顶后底色
- 半透明 + backdrop blur
- 滚动判定
- 比较当前与上一次 scrollY
别搞混
和「固定定位 fixed」的区别
position: fixed 的元素脱离文档流，需要手动给下方内容补 padding；position: sticky 仍占位，滚到阈值才吸附，父容器一结束就跟着离开。
和「悬浮按钮」的区别
悬浮按钮一直在同一个位置，和滚动无关；粘性头部是「先跟着文档走，到阈值才停住」。
容易踩的坑
- 父级任意一层有 overflow: hidden/auto，sticky 就会失效或只在那个容器里吸附
- sticky 元素必须有 top（或 bottom）值，否则不会吸附
- 下滑隐藏要设阈值，刚滚一两个像素就藏起来会显得页面在抖
- 隐藏用的是 transform: translateY(-100%)，不要用 display: none，否则没有动画
无障碍降级
隐藏/出现的位移动画在 prefers-reduced-motion 下改为瞬间切换，或干脆常驻显示不做隐藏。
关键词
- position: sticky
- scroll direction
- hide on scroll down
- sticky nav
- will-change: transform