本文深入解析了CSS中实现固定导航栏的两种核心方案——`position: fixed`与`position: sticky`：前者通过脱离文档流实现绝对固定，兼容性极佳但需手动处理内容遮挡问题；后者作为现代粘性定位方案，在滚动至阈值时智能吸附顶部，天然保留文档流、无需额外留白，交互更自然流畅。文章结合代码实例与使用场景对比，帮助开发者根据浏览器支持要求、布局复杂度和用户体验目标做出精准选择，尤其推荐在现代项目中优先采用`sticky`以提升页面表现力与维护性。

实现导航栏固定在页面顶部，常用的方法是使用 CSS 的 position: fixed 或 position: sticky。两者都能让导航栏在滚动时保持可见，但行为略有不同。下面通过实际案例说明如何使用。

1. 使用 position: fixed 固定导航栏

当设置 position: fixed 时，元素会脱离文档流，相对于浏览器窗口固定位置，即使页面滚动也不会移动。

HTML:

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:

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 越来越受欢迎，尤其适用于单页或长内容页面。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~