使用 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，兼容性好，用户体验流畅。下面通过一个实际案例说明如何使用
搭配 Flex 和 Grid 实现响应式固定导航栏。
1. 使用 position: sticky 固定导航栏位置
position: sticky
是 relative 和 fixed 的结合体。元素在视口内正常流动（relative），当滚动到设定的偏移位置时，变为固定状态（类似 fixed），直到父容器离开视口。
给导航栏设置以下样式即可实现粘性定位：
其中
top: 0
表示距离视口顶部 0 像素时开始“粘住”，
z-index
确保导航栏在其他内容之上。
2. 使用 Flexbox 构建自适应导航结构
Flexbox 非常适合创建水平
排列
、自动对齐的导航项，并能在小屏幕上折叠布局。
HTML 结构示例：
CSS 样式使用 Flex 布局：
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
这样在桌面端，Logo 左对齐，链接居中，菜单按钮右对齐，整体自适应宽度。
3. 移动端响应：结合 Grid 与隐藏显示切换
在小屏幕上，可以改用 CSS Grid 控制布局，并通过媒体查询折叠菜单。
移动端样式调整：
这里利用了 Grid 的列分布能力，同时通过 JS 控制
的
类来展开菜单（可选）：
4. 完整实践优势总结
无 JavaScript 固定效果
：sticky 天然支持，性能好
Flex 布局简洁清晰
：适合水平导航，自动对齐
Grid 辅助响应控制
：在复杂布局中更灵活
移动优先设计
：折叠菜单节省空间，体验佳
兼容性良好
：现代
浏览器
均支持 sticky 与 Flex/Grid
基本上就这些。通过
position: sticky + Flexbox + Grid
的组合，能高效实现既美观又实用的响应式固定导航栏，适合大多数官网、博客或企业站点使用。不复杂但容易忽略细节，比如 z-index 和
overflow
的影响，注意测试不同设备下的表现即可。
position: sticky
.navbar {
position: sticky;
top: 0;
z-index: 100;
background-color: #fff;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.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;
}
@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;
}
}
.nav-linksactive
document.querySelector('.menu-toggle').addEventListener('click', function() {
document.querySelector('.nav-links').classList.toggle('active');
});