使用 position: sticky 可实现导航栏滚动吸附效果，通过设置 top: 0 使元素在滚动到视口顶部时固定，需确保父元素无 overflow 或 transform 限制，并兼容老版本浏览器。

在CSS初级项目中，实现导航栏固定并随页面滚动而吸附在顶部的效果，是提升用户体验的常见做法。其中 position: sticky 是最简单高效的解决方案，无需JavaScript即可完成。

什么是 position: sticky？

sticky 定位是一种相对定位（relative）和固定定位（fixed）的结合体。元素在正常文档流中表现为 relative，当页面滚动到某个特定阈值时，它会像 fixed 一样固定在视窗的指定位置。

要使 sticky 生效，必须给元素设置一个阈值，比如 top、bottom、left 或 right。最常用的是 top: 0，表示滚动到距顶部0像素时开始“粘住”。

实现固定导航栏的基本步骤

以下是一个简单的实践示例：

1. 结构清晰的HTML导航结构：

  
页面内容
  
滚动页面查看导航栏效果...
  

2. 使用 CSS 设置 sticky 效果：

.navbar {
  background-color: #333;
  padding: 15px;
  text-align: center;
  position: -webkit-sticky; /* Safari 支持 */
  position: sticky;
  top: 0;
  z-index: 100;
}
.navbar a {
color: white;
margin: 0 10px;
text-decoration: none;
}
.content {
height: 2000px; / 模拟长页面 /
padding: 20px;
}

关键点说明：

• top: 0 是触发 sticky 的条件，表示距离视口顶部0px时固定
• z-index: 100 确保导航栏在其他内容之上
• position: -webkit-sticky 兼容老版本 Safari 浏览器

注意事项与常见问题

虽然 sticky 很方便，但使用时需注意以下几点：

• 父元素不能有 overflow: hidden、overflow: auto 或 transform 属性，否则 sticky 会失效
• sticky 只对块级元素有效，确保 nav 或其容器是块级（display: block）
• 若页面没有足够内容产生滚动，sticky 效果不会被触发
• 部分旧版浏览器不支持，生产环境建议加前缀或做降级处理

实际应用场景扩展

除了主导航栏，sticky 还可用于：

• 侧边目录栏：滚动时保持可见
• 表格表头：长表格中始终显示列名
• 返回顶部按钮：在特定区域“粘住”

基本上就这些。用好 position: sticky，能让你的网页交互更自然流畅，而且代码简洁易维护。对于初学者来说，这是非常值得掌握的一个CSS技巧。不复杂但容易忽略细节，动手试试就知道效果了。