sticky-and-fixed-elements

粘性和固定元素

position: fixed 与 position: sticky

属性	行为	适用场景
position: fixed	从文档流中移除。无论滚动位置或父元素如何变化，始终保持在视口中的同一位置。	全局导航栏、底部工具栏、浮动操作按钮
position: sticky	在文档流中保持原位，直到到达滚动阈值，然后固定位置。父元素滚动超出后，会回到文档流中。	表格列标题、长列表中的分节标题、滚动容器内的页内工具栏

当元素属于特定分区或滚动上下文时，优先使用 sticky 而非 fixed。固定元素会浮在所有内容之上，并影响整个视口——仅在真正的全局 UI 中使用。

顶部 — 导航栏

全局导航栏是最常见的固定元素。它应当：

• 始终可见，以便用户随时离开当前页面
• 尽可能窄，以最大化内容区域——常见高度为 48–64px
• 设置背景和阴影，避免滚动到其下方的内容透出
• 页面滚动时，细微的阴影（--shadow-sm）可表明其下方有内容

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  z-index: var(--z-header);
}

在页面主体中设置匹配的顶部内边距，以补偿固定导航栏：

body { padding-top: var(--header-height); }

底部 — 移动端工具栏

在移动设备上，屏幕底部是单手拇指最容易触及的区域。常驻底部工具栏适合放置：

• 主要导航（底部标签栏——iOS 和 Android 的惯例）
• 当前视图的上下文操作（编辑、分享、删除）
• 用于最重要操作的浮动操作按钮（FAB）

底部工具栏应当：

• 在带有主屏幕指示条的设备上遵循安全区域内边距：padding-bottom: env(safe-area-inset-bottom)
• 与内容在视觉上区分开（背景填充、顶部边框或阴影）
• 最多包含 3–5 个项目——超过 5 个时，应移至菜单或改用其他设计模式
• 导航标签使用带文字的图标；上下文工具栏可只使用图标（并提供工具提示）

在桌面端，底部工具栏并不常见。状态栏、编辑器工具栏和命令面板是桌面端的对应形式——它们通常通过 position: fixed 固定在底部，或通过 position: sticky 固定在滚动容器内。

粘性表格标题

对于滚动容器中的数据表，粘性列标题可以避免用户忘记各列的含义。

thead th {
  position: sticky;
  top: 0;
  background: var(--color-surface);
  z-index: 1;
}

如果表格还有粘性首列（用于行标识），左上角单元格需要同时设置 top: 0 和 left: 0，并设置更高的 z-index，使其位于标题行和粘性列上方。

堆叠和 Z-index

粘性和固定元素会创建堆叠上下文。应将 z-index 定义为命名令牌，而不是任意数字：

--z-base:       0;
--z-dropdown:   100;
--z-sticky:     200;
--z-header:     300;
--z-modal:      400;
--z-toast:      500;

每个固定或粘性元素都必须使用令牌显式声明其 z-index。避免使用 z-index: 9999 这类临时值——它们意味着堆叠上下文缺乏管理，最终会产生冲突。

固定层多少才算过多

每个固定层都会占用内容区域的空间，并增加视觉复杂度。页面通常不应需要超过：

• 1 个固定标题栏（顶部）
• 1 个固定工具栏或底部导航栏（底部，移动端）
• 1 个浮动操作按钮或上下文叠层

同时使用固定标题栏、固定底部工具栏、浮动按钮、粘性侧边栏和粘性表格标题，层数就过多了。尽可能合并。

审查清单

• 分区范围内的元素是否使用 sticky，而 fixed 是否仅用于真正的全局 UI？
• 固定标题栏是否通过主体内边距补偿了自身高度？
• 移动端底部工具栏是否遵循 env(safe-area-inset-bottom)？
• 所有 z-index 值是否都定义为命名令牌，而非任意数字？
• 同时存在的固定层是否尽可能少——在大多数情况下，最多为标题栏加一个底部元素？
• 内容在固定元素后方滚动时，是否不会透出（固定元素是否设置了背景和阴影）？