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