如何用 position: sticky 实现不遮挡页面滚动的固定头部-html教程-PHP中文网

如何用 position: sticky 实现不遮挡页面滚动的固定头部

使用 position: sticky 替代 fixed 可让页眉随内容自然滚动，同时在视口顶部自动“吸附”，既保持视觉固定效果，又完全避免遮挡滚动区域、阻断鼠标滚轮交互的问题。

使用 `position: sticky` 替代 `fixed` 可让页眉随内容自然滚动，同时在视口顶部自动“吸附”，既保持视觉固定效果，又完全避免遮挡滚动区域、阻断鼠标滚轮交互的问题。

在构建全屏高度（100vh）布局时，开发者常误用 position: fixed 实现头部固定，却忽视其带来的核心副作用：fixed 元素脱离文档流、覆盖可滚动区域，导致悬停在 header 上时鼠标滚轮失效，页面无法响应滚动。根本原因在于 fixed 元素始终相对于视口定位，且默认捕获指针事件（即使背景透明），从而拦截了底层 .app 容器的滚动行为。

✅ 正确解法是采用 position: sticky —— 它是一种混合定位模式：元素在正常文档流中渲染（不脱离流、不遮挡滚动），仅当其滚动到指定偏移位置（如 top: 0）时，才“粘住”在容器顶部。这完美契合“视觉固定 + 滚动无阻”的需求。

关键实现要点

将 .header 的 position: fixed 改为 position: sticky; top: 0;
确保其父容器（.app）具有明确的滚动上下文：设置 height: 100vh 和 overflow-y: scroll
必须为 .app 添加 position: relative（或 absolute/sticky），因为 sticky 的“最近滚动祖先”需是具有定位属性的块级容器（MDN 明确要求）
移除冗余的 margin-top（如原 .content { margin-top: 100px }），sticky 不会挤压内容，布局更干净

优化后的 CSS 示例

html {
  overflow: hidden; /* 保持全屏高度约束 */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.app {
  height: 100vh;
  overflow-y: scroll;
  position: relative; /* ✅ 必须添加！sticky 依赖此定位上下文 */
}

.header {
  position: sticky; /* ✅ 替换 fixed */
  top: 0;             /* ✅ 触发吸附的临界位置 */
  z-index: 10;        /* 可选：确保层级高于内容 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px;
  background-color: rgba(0, 0, 0, 0.3);
}

.content > * {
  height: 200px; /* 示例内容高度，便于演示滚动 */
}