使用 position: sticky 可轻松实现导航栏滚动固定，只需设置 top: 0 和 z-index，并确保父容器无 overflow 或 transform 限制，兼容现代浏览器。
让导航栏在页面滚动时固定在顶部，使用 position: sticky 是最简单且现代的方法。它不需要复杂的 JavaScript，只需几行 CSS 就能实现平滑的粘性定位效果。
1. 基本结构：HTML 导航栏
确保你的导航栏包裹在一个块级元素中，通常使用
2. 使用 position: sticky 实现固定
为导航栏设置position: sticky 和 top 值，当滚动到指定位置时，元素会“粘”在视口顶部：
.navbar {
position: sticky;
top: 0;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
display: flex;
justify-content: space-around;
padding: 1rem 0;
z-index: 1000;
}
关键点说明：
- top: 0 表示当元素到达视口顶部 0px 时开始固定
- z-index 确保导航栏在其他内容之上
- background 和 shadow 提升视觉层次，避免文字从下方透出
3. 注意事项与兼容性
sticky 定位依赖父容器的限制：- 父元素不能有
overflow: hidden、overflow: auto或transform，否则 sticky 会失效 - 确保导航栏在文档流中正常排列，不要被绝对定位或其他布局打断
- 支持现代浏览器（IE 不支持，需考虑兼容性方案）
4. 可选增强：添加过渡或背景动画
提升用户体验，可以加入简单的样式变化：
.navbar {
transition: background 0.3s ease;
}
.navbar:hover {
background-color: #f8f8f8;
}
基本上就这些。使用 position: sticky 实现导航栏固定顶部，代码简洁、维护方便，是当前推荐的做法。只要注意布局结构和父容器限制，就能稳定生效。
