position: sticky 是相对定位与固定定位的结合，设置 top 值后，元素在滚动到临界点时会“粘”在视口顶部。实现 Sticky Header 只需给 header 设置 position: sticky、top: 0，并注意父元素不能有 overflow: hidden 或 transform，否则失效。相比 JavaScript 监听 scroll 事件，sticky 更高效、简洁，适用于大多数场景，仅在需要复杂行为时才结合 JS 使用。
使用 CSS 的 position: sticky 可以轻松实现 header 在页面滚动时固定在顶部的效果，既简单又高效，无需 JavaScript。
什么是 position: sticky？
sticky 是一种相对定位和固定定位的结合体。元素在正常文档流中占据位置（像 relative），当页面滚动到某个临界点时，它会“粘”在视口的某个位置（像 fixed）。
要让 sticky 生效，必须指定一个阈值（top、bottom、left 或 right），否则它不会起作用。
实现 Sticky Header 的基本代码
给 header 设置 position: sticky 和 top: 0，这样当滚动到 header 到达视口顶部时，它就会固定住。
立即学习“前端免费学习笔记（深入）”；
header {
position: sticky;
top: 0;
background-color: white; /* 避免内容从下方透出 */
z-index: 100; /* 确保在其他内容之上 */
box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 可选：增加视觉层次 */
}<header>
<h1>网站标题</h1>
<nav>
<a href="#home">首页</a>
<a href="#about">关于</a>
<a href="#contact">联系</a>
</nav>
</header>
<main>
<p>这里是一大段内容...</p>
<!-- 滚动内容 -->
</main>实际应用中的注意事项
虽然 sticky 很方便，但有几个关键点需要注意，避免出现异常行为：
- 父元素不能有 overflow: hidden、overflow: auto 或 transform，否则 sticky 会失效
- 确保设置了 top 值（如 top: 0），否则元素不会“粘”住
- 多个 sticky 元素可以叠加，比如侧边栏和 header 同时 sticky，但需注意层级
- 在移动端表现良好，是响应式设计中的常用技巧
与 JavaScript 滚动效果的对比
过去常用 JavaScript 监听 scroll 事件，动态添加 fixed 类来实现类似效果。sticky 的优势在于：
- 原生支持，性能更好
- 无需监听事件，减少代码复杂度
- 自动处理脱离 sticky 区域后恢复原位
只有在需要更复杂逻辑（比如隐藏 header 向上滚动时）才考虑结合 JS 使用。
基本上就这些。不复杂但容易忽略细节。
