使用 position: sticky 结合 Flexbox 和 CSS Grid 可实现响应式固定导航栏。首先通过 position: sticky + top: 0 使导航栏滚动时吸附顶部，z-index 确保层级优先；接着用 Flexbox 布局实现桌面端 Logo 左对齐、导航链接居中、菜单按钮右对齐的自适应结构；在移动端（max-width: 768px）改用 Grid 布局控制整体分布，并将导航链接设为绝对定位、垂直堆叠，初始隐藏（max-height: 0），通过 JavaScript 切换 active 类展开菜单，配合过渡效果提升体验。该方案无需复杂 JS，兼容性好，性能优，适合现代网站设计。
实现一个响应式且固定定位的导航栏，关键在于结合 position: sticky 与现代布局方式如 Flexbox 或 CSS Grid。这种方案无需 JavaScript，兼容性好，用户体验流畅。下面通过一个实际案例说明如何使用 position: sticky 搭配 Flex 和 Grid 实现响应式固定导航栏。
1. 使用 position: sticky 固定导航栏位置
position: sticky 是 relative 和 fixed 的结合体。元素在视口内正常流动（relative），当滚动到设定的偏移位置时，变为固定状态（类似 fixed），直到父容器离开视口。
给导航栏设置以下样式即可实现粘性定位：
.navbar {
position: sticky;
top: 0;
z-index: 100;
background-color: #fff;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
其中 top: 0 表示距离视口顶部 0 像素时开始“粘住”，z-index 确保导航栏在其他内容之上。
2. 使用 Flexbox 构建自适应导航结构
Flexbox 非常适合创建水平排列、自动对齐的导航项，并能在小屏幕上折叠布局。
HTML 结构示例：
<nav class="navbar">
<div class="logo">Logo</div>
<ul class="nav-links">
<li><a href="#home">首页</a></li>
<li><a href="#about">关于</a></li>
<li><a href="#services">服务</a></li>
<li><a href="#contact">联系</a></li>
</ul>
<div class="menu-toggle">☰</div>
</nav>
CSS 样式使用 Flex 布局：
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 5%;
}
.logo, .menu-toggle {
flex: 1;
}
.nav-links {
display: flex;
list-style: none;
gap: 2rem;
margin: 0;
padding: 0;
flex: 3;
justify-content: center;
}
.nav-links a {
text-decoration: none;
color: #333;
font-weight: 500;
}
这样在桌面端，Logo 左对齐，链接居中，菜单按钮右对齐，整体自适应宽度。
3. 移动端响应：结合 Grid 与隐藏显示切换
在小屏幕上，可以改用 CSS Grid 控制布局，并通过媒体查询折叠菜单。
移动端样式调整：
@media (max-width: 768px) {
.navbar {
flex-direction: row;
grid-template-columns: auto 1fr auto;
gap: 1rem;
}
.nav-links {
position: absolute;
top: 100%;
left: 5%;
right: 5%;
background: white;
flex-direction: column;
align-items: center;
gap: 1rem;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.nav-links.active {
max-height: 200px;
padding: 1rem 0;
}
.menu-toggle {
cursor: pointer;
font-size: 1.5rem;
}
}
这里利用了 Grid 的列分布能力，同时通过 JS 控制 .nav-links 的 active 类来展开菜单（可选）：
document.querySelector('.menu-toggle').addEventListener('click', function() {
document.querySelector('.nav-links').classList.toggle('active');
});
4. 完整实践优势总结
- 无 JavaScript 固定效果：sticky 天然支持，性能好
- Flex 布局简洁清晰：适合水平导航，自动对齐
- Grid 辅助响应控制：在复杂布局中更灵活
- 移动优先设计：折叠菜单节省空间，体验佳
- 兼容性良好：现代浏览器均支持 sticky 与 Flex/Grid
基本上就这些。通过 position: sticky + Flexbox + Grid 的组合，能高效实现既美观又实用的响应式固定导航栏，适合大多数官网、博客或企业站点使用。不复杂但容易忽略细节，比如 z-index 和 overflow 的影响，注意测试不同设备下的表现即可。
