使用 Flexbox 与 position: sticky 可创建响应式粘性导航栏。通过 display: flex 实现水平布局，justify-content 与 align-items 控制对齐，结合媒体查询适配移动端；设置 position: sticky 和 top: 0 使导航栏滚动时固定于顶部，z-index 确保层级优先；添加 scroll 事件监听动态切换 .scrolled 类，配合背景模糊与阴影提升视觉反馈，实现流畅、兼容且美观的导航交互效果。
要实现一个带有滚动效果的导航栏，结合 Flexbox 布局与 Sticky Header（粘性定位） 是现代网页开发中简洁高效的做法。这种组合能让导航栏在页面滚动时固定在视口顶部，提升用户体验，同时保持布局灵活、响应迅速。
使用 Flexbox 构建响应式导航栏
Flexbox 非常适合用于创建水平或垂直对齐的导航结构，无论屏幕大小如何变化，都能自动调整子元素的排列方式。
基本 HTML 结构如下：
Logo
CSS 中使用 Flexbox 让导航内容均匀分布并居中对齐：
.navbar {display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background-color: #fff;
border-bottom: 1px solid #ddd;
}
这样就能让 Logo 和导航链接分别位于两侧，并且始终在同一水平线上，适配不同设备。
添加 Sticky 效果使导航栏随滚动固定
为了让导航栏在用户向下滚动时“吸附”在顶部，使用 CSS 的 position: sticky 是最直接的方式。
只需为导航容器添加以下样式：
.navbar {position: sticky;
top: 0;
z-index: 100;
}
top: 0 表示当元素到达视口顶部时开始固定。配合 z-index 确保它显示在其他内容之上，避免被遮挡。
这个方法无需 JavaScript，性能好，兼容主流浏览器（IE 不支持，需注意）。
优化移动端体验与视觉反馈
在移动设备上，可借助媒体查询将导航切换为垂直堆叠或汉堡菜单。
例如：
@media (max-width: 768px) {.navbar {
flex-direction: column;
gap: 10px;
}
.nav-links {
flex-direction: column;
}
.nav-links a {
text-align: center;
}
}
还可以通过 JavaScript 监听滚动事件，动态添加类名以改变背景颜色，增强交互感：
window.addEventListener('scroll', () => {if (window.scrollY > 50) {
document.querySelector('.navbar').classList.add('scrolled');
} else {
document.querySelector('.navbar').classList.remove('scrolled');
}
});
对应 CSS：
.navbar.scrolled {background-color: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(5px);
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
这样在滚动后会呈现半透明磨砂效果，视觉层次更清晰。
基本上就这些。用 Flexbox 控制布局结构，用 position: sticky 实现滚动吸附，再辅以简单的美化和响应式处理，就能做出专业级的导航栏效果。不复杂但容易忽略细节，比如 z-index 和容器高度控制，实际开发中要注意测试不同场景下的表现。
