使用position: fixed使导航栏脱离文档流并固定于视口顶部，需手动设置margin-top避免内容遮挡；2. 使用position: sticky让导航栏在滚动到顶部时自动吸附，仍保留文档流位置，无需额外留白；3. fixed兼容性好但布局影响大，sticky更智能且自然，适合现代浏览器下的长页面设计。
实现导航栏固定在页面顶部，常用的方法是使用 CSS 的 position: fixed 或 position: sticky。两者都能让导航栏在滚动时保持可见，但行为略有不同。下面通过实际案例说明如何使用。
1. 使用 position: fixed 固定导航栏
当设置 position: fixed 时，元素会脱离文档流，相对于浏览器窗口固定位置，即使页面滚动也不会移动。
示例代码：HTML:
<nav class="navbar-fixed">
<a href="#">首页</a>
<a href="#">关于</a>
<a href="#">服务</a>
<a href="#">联系</a>
</nav>
<div class="content">
<h1>页面内容</h1>
<p>滚动查看效果...</p>
</div>
CSS:
.navbar-fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #333;
color: white;
padding: 15px 0;
z-index: 1000;
}
.content {
margin-top: 70px; /* 避免内容被导航栏遮挡 */
}
注意：fixed 元素脱离文档流，下方内容可能被覆盖，因此需要给主体内容添加 margin-top 来留出空间。
2. 使用 position: sticky 实现粘性定位
position: sticky 是相对定位和固定定位的结合体。元素在滚动到特定阈值前表现为 relative，达到阈值后变为 fixed。
立即学习“前端免费学习笔记（深入）”；
示例代码：HTML:
<nav class="navbar-sticky">
<a href="#">首页</a>
<a href="#">关于</a>
<a href="#">服务</a>
<a href="#">联系</a>
</nav>
<div class="content">
<h1>长页面内容</h1>
<p>滚动到这里会看到导航栏粘住顶部...</p>
</div>
CSS:
.navbar-sticky {
position: -webkit-sticky; /* Safari 兼容 */
position: sticky;
top: 0;
background-color: #444;
color: white;
padding: 15px 0;
z-index: 999;
}
.content {
height: 2000px; /* 模拟长页面 */
padding: 20px;
}
sticky 的优势是不需要手动计算 margin，它仍占据文档流中的位置，不会导致布局错乱。
3. 如何选择 fixed 还是 sticky？
- 用 fixed 如果你希望导航栏始终固定在视口某位置，不随其原始位置变化
- 用 sticky 如果你希望导航栏只在到达顶部时才“吸附”，更自然地融入页面流
- sticky 不支持 IE，如果需兼容老浏览器，建议使用 fixed + JavaScript 模拟
基本上就这些。两种方式都很实用，根据设计需求选择即可。fixed 更自由，sticky 更智能。实际项目中 sticky 越来越受欢迎，尤其适用于单页或长内容页面。
