使用 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; /* 示例内容高度，便于演示滚动 */
}注意事项与兼容性
- ✅ 浏览器支持良好：Chrome 56+、Firefox 59+、Safari 6.1+、Edge 16+ 均已原生支持（CanIUse 数据）；
- ⚠️ 不要嵌套在 overflow: hidden 的父容器中：若 .app 外层有 overflow: hidden，可能截断 sticky 行为；
- ⚠️ 避免与 transform 冲突：对 sticky 元素或其祖先应用 transform 会创建新的层叠上下文，可能影响吸附逻辑；
- ? 无障碍友好：sticky 元素仍保留在 DOM 流中，屏幕阅读器能正确顺序读取，而 fixed 元素易造成逻辑跳读。
通过 position: sticky，你既能实现专业级的“吸顶导航”，又能保障滚动体验的完整性——无需 JavaScript、无 hack、语义清晰，是现代 CSS 布局中被严重低估的利器。
