使用 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导航结构：
立即学习“前端免费学习笔记（深入）”；
<nav class="navbar"> <a href="#home">首页</a> <a href="#about">关于</a> <a href="#services">服务</a> <a href="#contact">联系</a> </nav> <div class="content"> <h1>页面内容</h1> <p>滚动页面查看导航栏效果...</p> <!-- 更多内容 --> </div>
2. 使用 CSS 设置 sticky 效果：
.navbar {
background-color: #333;
padding: 15px;
text-align: center;
position: -webkit-sticky; /* Safari 支持 */
position: sticky;
top: 0;
z-index: 100;
}
<p>.navbar a {
color: white;
margin: 0 10px;
text-decoration: none;
}</p><p>.content {
height: 2000px; /<em> 模拟长页面 </em>/
padding: 20px;
}</p>关键点说明：
- 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技巧。不复杂但容易忽略细节，动手试试就知道效果了。
