使用Flex布局实现导航项水平排列，结合position: sticky使导航栏滚动时固定顶部，通过媒体查询与JavaScript控制小屏下折叠菜单显示，提升响应式体验。
要在CSS中实现导航栏的折叠效果并结合定位功能，可以使用 Flexbox 布局管理导航项的排列，再配合 position: sticky 实现滚动时固定在顶部的效果。同时通过媒体查询或JavaScript控制小屏幕下的折叠（响应式汉堡菜单）。以下是具体实现方法。
使用 Flex 布局构建水平导航栏
利用 Flexbox 可以轻松让 ul 内的 li 导航项水平排列，并自动填充可用空间，保持布局整洁。
示例代码：
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
padding: 1rem;
}
.nav-links {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.nav-links li {
margin: 0 1rem;
}
.nav-links a {
color: white;
text-decoration: none;
}
添加 position: sticky 实现粘性定位
让导航栏在页面滚动时始终停留在视口顶部，提升用户体验。
立即学习“前端免费学习笔记（深入）”；
只需为导航容器设置：
.navbar {
position: sticky;
top: 0;
z-index: 100;
}
这样导航栏会在滚动到顶部时“吸附”住，不会被内容遮挡。
实现折叠菜单（响应式）
在小屏幕上隐藏导航链接，通过按钮切换显示/隐藏状态。
- 使用 @media 查询判断屏幕尺寸
- 默认在小屏下将 .nav-links 设为 display: none
- 通过 JavaScript 切换类名控制显示
HTML结构示例：
JavaScript 控制显隐：
document.querySelector('.toggle-btn').addEventListener('click', function() {
document.querySelector('.nav-links').classList.toggle('show');
});
CSS 中定义 show 类：
@media (max-width: 768px) {
.nav-links {
display: none;
flex-direction: column;
background-color: #444;
position: absolute;
top: 100%;
left: 0;
width: 100%;
}
.nav-links.show {
display: flex;
}
}
整合效果：Flex + Sticky + 折叠
最终组合优势：
- 桌面端：Flex 水平布局 + 粘性定位，美观且固定
- 移动端：折叠菜单节省空间，点击展开
- 无需第三方框架即可实现专业导航体验
关键是确保 sticky 元素的父容器没有超出限制（如 overflow: hidden），否则会失效。
基本上就这些，不复杂但容易忽略细节。灵活运用 Flex 和 sticky，再加一点JS交互，就能做出实用又现代的导航栏。
