使用 position: sticky 替代 fixed 可让头部随内容自然滚动，同时在视口顶部“吸附”显示，彻底解决固定定位遮挡滚动区域、导致页面无法滚动的问题。
使用 `position: sticky` 替代 `fixed` 可让头部随内容自然滚动，同时在视口顶部“吸附”显示，彻底解决固定定位遮挡滚动区域、导致页面无法滚动的问题。
在构建全屏高度（100vh）的响应式布局时，开发者常误用 position: fixed 实现“固定头部”，却忽略了它会脱离文档流、覆盖下方内容并拦截鼠标滚轮事件——尤其当 或根容器设置了 overflow: hidden 时，整个页面将失去滚动能力。
正确的解法是采用现代 CSS 的 position: sticky：
- 它保留在正常文档流中，不会遮挡后续元素；
- 在滚动过程中，当元素到达指定偏移（如 top: 0）时自动“吸附”到视口边界；
- 无需手动设置 margin-top 或 padding-top 预留空间，语义清晰且维护性高；
- 兼容性优秀：Chrome 56+、Firefox 59+、Safari 15.4+、Edge 16+ 均原生支持（MDN 参考）。
以下是优化后的关键代码：
html {
overflow: hidden; /* 保持背景图不缩放所需 */
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.app {
height: 100vh;
overflow-y: auto; /* 推荐用 auto 而非 scroll，避免空滚动条 */
position: relative; /* sticky 需要最近的非-static 定位祖先 */
}
.header {
position: sticky;
top: 0; /* 触发吸附的临界位置 */
z-index: 10; /* 仍需 z-index 确保层级，但不再需要 left/right */
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px;
background-color: rgba(0, 0, 0, 0.3);
/* 移除 margin-top / width: 100% 等冗余声明 */
}
.content > * {
height: 200px; /* 示例内容高度，便于测试滚动 */
}
<div class="app">
<header class="header"><div class="header__left">
<button>Button 1</button>
<button>Button 2</button>
</div>
<div class="header__right">
<button>Button 3</button>
</div>
</header><main class="content"><div>...</div>
<div>...</div>
<div>...</div>
</main>
</div>
✅ 注意事项：
- .app 必须设置 position: relative（或 absolute/fixed），否则 sticky 将回退至 作为定位上下文，可能失效；
- top（或 bottom/left/right）必须显式声明，否则 sticky 不生效；
- 若 .content 内容高度不足 100vh，滚动不会触发——请确保内容总高度超过容器可视区；
- 如需兼容旧版 Safari（
通过 sticky，你既能实现视觉上“固定”的头部体验，又完全保留原生滚动行为与无障碍支持，是现代 Web 布局中固定导航栏的首选方案。
