使用 position: sticky 或 fixed 可实现导航栏常显。1. sticky 在滚动到阈值时粘住，不脱离文档流，需设 top 值，兼容性较弱；2. fixed 使导航栏始终固定于视口，脱离文档流，需为 body 添加 padding 防遮挡；3. sticky 适合自然滚动后固定，fixed 适合始终固定或复杂交互；4. Bootstrap 等框架提供 sticky-top 和 fixed-top 类快速实现。根据布局与交互需求选择，前者轻量自然，后者控制更强。
实现导航栏在页面滚动时保持可见，是现代网页设计中的常见需求。通过CSS的 position: sticky 和 position: fixed，可以轻松创建平滑且高效的粘性或固定导航栏效果。下面介绍两者的使用方法、区别以及实际应用技巧。
1. 使用 position: sticky 实现粘性导航栏
position: sticky 是相对定位和固定定位的结合体。元素在视口内正常流动，当滚动到特定阈值时，变为“粘住”状态。
要使 sticky 生效，必须设置一个阈值（如 top 值），否则它不会触发。
示例代码：
立即学习“前端免费学习笔记（深入）”；
nav {
position: -webkit-sticky; /* 兼容 Safari */
position: sticky;
top: 0;
background-color: #fff;
z-index: 100;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
这个导航栏会在滚动到顶部时“粘”在屏幕顶端，直到其容器离开视口。优点是无需 JavaScript，行为自然，且不影响文档流。
2. 使用 position: fixed 创建固定导航栏
position: fixed 会让元素脱离文档流，始终相对于视口定位。适合需要一直停留在屏幕某位置的导航栏。
示例代码：
立即学习“前端免费学习笔记（深入）”；
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #333;
color: #fff;
z-index: 1000;
}
body {
padding-top: 60px; /* 避免内容被遮挡 */
}
使用 fixed 时需注意：元素脱离文档流，可能导致下方内容被遮挡，因此通常给 body 或主内容区域添加 padding-top 来补偿导航栏高度。
3. Sticky 与 Fixed 的选择建议
根据实际场景选择合适的方式：
- 用 sticky：希望导航栏在页面中自然出现，滚动到顶部才固定，结构简单，维护成本低。
- 用 fixed：需要导航栏从一开始就固定在顶部，或与其他固定元素联动（如返回顶部按钮）。
- 兼容性考虑：sticky 在老版本IE不支持，若需兼容可降级为 fixed + JS 监听滚动。
4. 结合CSS框架快速实现（以 Bootstrap 为例）
主流CSS框架已封装好这些功能。例如 Bootstrap 5 提供了现成的类：
<nav class="navbar navbar-expand-lg bg-body-tertiary sticky-top"> <!-- 导航内容 --> </nav>
其中 sticky-top 类就是基于 position: sticky; top: 0; 实现的。若要用 fixed，可用 fixed-top 类，它会自动设置 fixed 并调整 body 间距。
基本上就这些。两种方式都能有效提升用户体验，关键是根据布局和交互需求做出合适选择。sticky 更轻量自然，fixed 更强控制，合理使用即可。
