使用 position: sticky 可实现导航栏滚动时固定在顶部。1. 为导航栏设置 position: sticky 和 top: 0，使其在距视口顶部 0px 时固定；2. 确保父容器未设置 overflow: hidden 或 transform，以免 sticky 失效；3. 添加 z-index、背景色、阴影和全宽提升视觉效果；4. 注意页面需有足够内容触发滚动，多个 sticky 元素会堆叠，旧版浏览器可能需加前缀。该方法无需 JavaScript，兼容性好且行为自然。
要实现导航栏在页面滚动时固定在顶部，使用 CSS 的 position: sticky 是最简单高效的方法。它不需要 JavaScript，兼容性好，且行为自然。
1. 基本语法和结构
给导航栏设置 position: sticky，并配合 top 属性来定义它开始“粘住”的位置。
示例代码：<nav class="navbar">
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#about">关于</a></li>
<li><a href="#contact">联系</a></li>
</ul>
</nav>
CSS 样式：
.navbar {
position: sticky;
top: 0;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
z-index: 1000;
}
说明：当页面滚动到导航栏距离顶部 0px 时，它就会固定在视口顶部，直到父容器离开视口为止。
2. 确保父元素没有限制高度或溢出隐藏
sticky 的行为依赖于其父容器。如果父元素设置了 overflow: hidden、overflow: auto 或 transform 等属性，sticky 可能失效。
立即学习“前端免费学习笔记（深入）”；
避免以下情况：
- 父容器设置了
overflow: hidden
- 父容器使用了
transform: translate()
等变换 - 父容器高度受限导致内容被裁剪
3. 添加样式提升用户体验
为了让固定导航栏更美观实用，可以添加以下样式：
- z-index: 1000：确保导航栏在其他内容之上
- background-color：防止滚动时内容从下方透出
- box-shadow：增加视觉层次感
- width: 100%：保持横跨整个屏幕
4. 实际应用中的注意事项
sticky 不是 fixed，它的定位是相对于其最近的滚动容器。常见问题包括：
- 页面必须有足够内容才能触发滚动
- 多个 sticky 元素会依次堆叠
- 在部分旧版浏览器中需加前缀（如 Safari）
基本上就这些。只要结构合理，用 position: sticky 实现滚动固定导航非常直接，不复杂但容易忽略细节。
