粘性头部与顶部栏系统 是做什么的？
目的
粘性头部与顶部栏系统提供了一个全面的框架，用于设计、构建和配置持久的页面顶部导航堆栈。现代 Web 应用和营销网站经常使用分层的顶部栏——结合了宣传通知横幅、次级实用链接（货币/语言选择器、支持链接、商店定位器）和主导航栏。
当这些栏在滚动过程中保持固定或粘性时，架构不当的系统会引入关键可用性问题：在移动设备上消耗过多垂直视口空间、遮挡锚点目标内容（scroll-margin-top 不匹配）、滚动状态变化期间导致布局抖动或卡顿、与模态框或下拉菜单产生 z-index 堆叠冲突，以及困住键盘焦点或破坏屏幕阅读器地标导航。该技能为粘性头部建立了设计、空间构成、滚动状态逻辑、高度样式和无障碍标准。
用例
- 电商全局头部： 多层顶部栏组合，包括顶部通知横幅（促销代码/免费配送进度）、实用链接（账户登录、地区选择器、商店定位器）以及带搜索栏和购物车数量徽章的主粘性导航。
- SaaS 营销与产品营销头部： 简洁的主头部，在滚动时收缩（减少内边距/Logo 大小）或动态向下滚动隐藏/向上滚动显示，以最大化垂直内容画布，同时保持即时导航访问。
- 内容门户与出版头部： 粘性头部集成阅读进度条、分类导航、文章标题指示器和快速书签/分享浮动工具。
- Web 应用与 SaaS 应用壳： 固定顶部栏包含面包屑、活动工作区切换器、命令搜索触发器、用户配置菜单和实时通知铃铛。
何时不使用
- 画布内格式化工具栏： 对于浮动在内容上方或附着于特定编辑器组件的富文本编辑器工具栏或批量操作坞，请使用
toolbar-and-action-dock-system。 - 移动端底部导航栏： 对于固定在移动视口底部的主移动应用标签页，请使用
bottom-navigation-system。 - 完整侧边导航壳： 对于主导航由可折叠左侧边栏驱动的复杂 SaaS Web 应用，请使用
sidebar-navigation-system。 - 浮动操作坞： 对于固定在视口角落的浮动上下文按钮（例如聊天小部件、返回顶部 FAB），请使用
sticky-and-floating-ui-system。
输入
- 顶部栏层级架构： 存在的层级规范（例如，层级 1：通知栏，层级 2：实用头部，层级 3：主导航）。
- 滚动行为模型： 所需的粘性机制（
sticky-always、shrink-on-scroll、hide-on-scroll-down / reveal-on-scroll-up或static-to-sticky）。 - 表面与主题令牌： 背景表面颜色、边框令牌、背景模糊效果（
backdrop-filter: blur()）以及来自elevation-and-depth-system和accessible-color-system的高度阴影。 - 视口与设备目标： 用于将多层桌面头部折叠为统一移动顶部栏的断点阈值（
< 768px、< 1024px、≥ 1024px）。
输出
- 粘性头部布局与堆叠规范： 定义固定/粘性定位的 CSS Grid/Flexbox 结构、CSS 自定义属性偏移变量（
--header-height）以及 z-index 层级标度。 - 滚动状态过渡与运动规则： 滚动监听器逻辑、阈值偏移、CSS 过渡类（
.is-scrolled、.is-hidden）和硬件加速变换（transform: translateY()）的技术规范。 - 响应式移动端折叠规范： 将多行桌面顶部栏转换为带抽屉切换触发器的单一紧凑型移动端头部的布局规则。
- WCAG AA 无障碍蓝图： 跳过链接实现（
.skip-link）、标题锚点的scroll-margin-top偏移补偿、键盘焦点陷阱避免以及屏幕阅读器地标结构（<header>、<nav>、role="banner"）。
工作流
1. 构建顶部栏堆叠层次结构
确定多层顶部栏组成并建立语义 HTML 布局：
- 语义 HTML 容器： 将所有顶部栏包裹在单个
<header role="banner">标签内，为屏幕阅读器用户维护一个清晰的横幅地标。 - 层级 1：通知栏（
<aside>或<div>）： 位于绝对顶部的高优先级微横幅（例如，免费配送阈值、系统警报）。 - 层级 2：实用栏（
<div class="utility-bar">）： 辅助链接、语言/货币选择器、联系链接、客户支持。 - 层级 3：主导航（
<nav aria-label="Main Navigation">）： 品牌 Logo、主要部分链接、搜索输入、账户链接、购物车或主要 CTA。
2. 定义定位与滚动机制
根据内容密度和视口限制选择粘性实现方法：
position: sticky与position: fixed：- 当允许自然文档流在锁定到顶部之前时，优先在容器上使用
position: sticky; top: 0; z-index: 1000;。 - 当主体内容显式使用
padding-top: var(--header-height);时，使用position: fixed; top: 0; left: 0; right: 0;。
- 当允许自然文档流在锁定到顶部之前时，优先在容器上使用
- 多层滚动折叠策略：
- 在滚动超过阈值（例如
scrollY > 50px）时，通知栏和实用栏自然滚出视图，而主导航锁定（position: sticky; top: 0;）或整个头部过渡。 - 动态计算 CSS 自定义属性（例如
--header-height），以便主页面内容和锚点链接正确调整。
- 在滚动超过阈值（例如
3. 实现滚动状态过渡与微交互
在用户向下滚动页面时增强头部的人机工程学：
- 滚动收缩过渡：
- 默认状态（在顶部）：头部高度
80px，Logo 高度40px，内边距1.25rem 2rem。 - 滚动状态（
.is-scrolled）：头部高度60px，Logo 高度30px，内边距0.75rem 2rem。 - 平滑动画：使用硬件加速的 CSS 过渡（
transition: padding 0.25s ease, height 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;）。
- 默认状态（在顶部）：头部高度
- 动态隐藏/显示（智能头部）：
- 向下滚动（
scrollY > lastScrollY && scrollY > 150px）：应用transform: translateY(-100%);将头部滑出屏幕，最大化阅读视口。 - 向上滚动（
scrollY < lastScrollY）：应用transform: translateY(0);立即显示导航。
- 向下滚动（
- 表面高度与背景模糊：
- 在页面顶部：背景半透明或平面背景无阴影。
- 滚动时：添加实心/玻璃态表面（
background-color: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px);）和高度阴影（box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);）。
4. 配置移动端视口适配
移动端视口（< 768px）的垂直空间非常有限：
- 移动端头部高度上限： 将移动端粘性头部高度限制在最大 56px–64px，以避免消耗超过 10% 的移动屏幕高度。
- 移动端层级缩减： 在移动端隐藏次级实用栏，将实用链接转移到可折叠的移动端导航抽屉中。
- 通知栏整合： 将通知文本压缩为简洁的微文案或自动轮播文字，或保持静态位于粘性主头部上方。
5. 强制执行 WCAG AA 无障碍与焦点管理
- 跳转到主要内容链接： 提供一个顶级跳过链接作为第一个可聚焦元素（
<a href="#main-content" class="skip-link">Skip to main content</a>）。当通过Tab聚焦时，将其可见地定位在粘性头部上方（top: 1rem; left: 1rem; z-index: 9999;）。 - 锚点目标滚动边距（
scroll-margin-top）： 防止当用户点击内部锚点链接或目录项时粘性头部覆盖标题：:target, [id] { scroll-margin-top: calc(var(--header-height) + 1.5rem); } - 键盘导航与下拉菜单： 确保所有头部下拉菜单（巨型菜单、账户菜单、移动端汉堡切换按钮）完全可通过
Tab、Enter、Space和Escape操作。 - 适应用户运动偏好（prefers-reduced-motion）： 通过禁用滑动变换和布局过渡来尊重用户的运动偏好：
@media (prefers-reduced-motion: reduce) { .site-header { transition: none !important; } }
决策规则
粘性滚动机制选择矩阵
| 站点类型 | 推荐滚动行为 | 移动端适配 | 理由 |
|---|---|---|---|
| 电商商店 | 粘性主导航 + 静态顶部栏 | 顶部促销栏滚走；主导航保持粘性（56px） | 保持搜索、购物车数量和分类始终可访问，以最大化转化率。 |
| SaaS 落地页/营销 | 滚动收缩或智能隐藏/显示 | 统一 60px 头部；向下滚动隐藏，向上滚动显示 | 最大化视觉英雄画布和阅读空间，同时在意图操作时提供即时导航访问。 |
| 内容博客/社论 | 带阅读进度的智能隐藏/显示 | 紧凑顶部栏带滚动进度条指示器 | 为长文阅读提供 100% 视口空间，在反向滚动时立即返回导航。 |
| Web 应用/仪表板 | 固定始终可见头部 | 固定单行头部（56px） | 作为应用实用壳；动态隐藏会在工作流中导致迷失方向。 |
Z-Index 层级标度
在整个设计系统中保持严格的 z-index 编排：
z-index: 10000; -> 跳转到内容链接（聚焦时）
z-index: 9000; -> 模态对话框/灯箱
z-index: 8000; -> 移动端导航抽屉/覆盖层
z-index: 7000; -> 全局提示与通知横幅
z-index: 1000; -> 粘性/固定顶部头部堆栈
z-index: 500; -> 上下文工具栏与浮动坞
z-index: 1; -> 堆叠上下文内容卡片
约束
- 无障碍（WCAG 2.1 AA）：
- SC 2.4.1 绕过块： 必须包含一个在头部导航之前可见的“跳转到主要内容”链接。
- SC 1.4.3 对比度： 头部文本、图标和菜单触发器在滚动和未滚动头部状态下必须满足最低 4.5:1 的对比度。
- SC 2.4.7 焦点可见： 当在任何背景颜色上通过粘性头部元素进行 Tab 导航时，焦点指示器必须保持完全可见且不被裁剪。
- 性能与渲染：
- 滚动监听器必须通过
requestAnimationFrame或IntersectionObserver进行节流或绑定，以避免滚动事件期间强制同步布局抖动。 - 模糊滤镜（
backdrop-filter）必须谨慎限定范围，并在低功耗移动设备上测试 GPU 延迟。
- 滚动监听器必须通过
- 视口布局保护： 移动设备上的粘性头部在粘性状态下高度绝不能超过 64px 或视觉视口高度的 15%。
常见失败模式
- 锚点内容重叠错误： 点击内部链接（
#section-2）将部分标题滚动到粘性头部正下方，因为省略了scroll-margin-top，导致标题不可见。 - 视口屏幕占用过多： 在移动屏幕上保持 140px 的多层桌面头部粘性，使得移动屏幕上实际页面内容的可见区域不足 60%。
- 滚动布局抖动： 在未节流的
window.onscroll监听器中查询header.offsetHeight，导致布局抖动和卡顿的 30fps 滚动。 - Z-Index 堆叠冲突： 给粘性头部设置
z-index: 999999，导致它在模态背景覆盖层或全屏灯箱上呈现时显得尴尬。 - 焦点指示器裁剪： 将元素放置在带有
overflow: hidden的固定容器内，导致顶部/底部链接的焦点环被视觉上裁剪掉。
验证标准
- 头部容器使用语义
<header role="banner">，子导航包含在<nav aria-label="...">中。 - “跳转到主要内容”链接存在，可作为第一个键盘 Tab 目标，并且在聚焦时可见地位于粘性头部上方。
- 内部锚点链接目标元素设置
scroll-margin-top，其值等于或超过最大粘性头部高度。 - 移动端粘性头部高度不超过 64px，次级顶部栏折叠到移动端抽屉中。
- 滚动状态过渡（收缩或隐藏/显示）使用硬件加速的 CSS 属性（
transform、opacity）并节流滚动计算。 - 跨透明、滚动或模糊玻璃状态的文本和图标对比度满足 WCAG AA（≥4.5:1 比例）。
- Z-index 层级遵循系统标度（头部在
z-index: 1000，低于模态框和抽屉）。