用 position: fixed 实现固定导航栏需设 top: 0、left: 0 和 z-index，并为 body 添加 padding-top 防遮挡；position: sticky 更轻量但兼容性有限，需父容器无 transform 且设 top 值；float 已淘汰，应改用 Flex/Grid。
position: fixed 会让导航栏始终停在视口顶部，但要注意脱离文档流带来的布局塌陷
用 position: fixed 实现固定导航栏最直接，但它会让元素脱离普通文档流，导致后续内容“上移”覆盖导航栏。必须给 或紧接其后的容器加 padding-top（值至少等于导航栏高度），否则页面首屏内容会被遮挡。
常见错误现象：滚动时导航栏确实固定了，但页面顶部文字/图片被盖住，或者点击锚点后目标元素被导航栏挡住。
-
top: 0和left: 0是必备定位基准，缺一不可 - 务必设置
z-index（如z-index: 1000），避免被其他绝对定位元素压住 - 若导航栏含响应式菜单（如 hamburger icon），需确保
fixed状态下媒体查询仍生效
position: sticky 是更轻量的“条件固定”，但兼容性需留意
position: sticky 的行为是“滚动到某位置才固定”，它不脱离文档流，不会引发塌陷问题，适合需要自然进入视口再固定的场景（比如侧边目录栏或二级导航）。但它的触发依赖父容器有明确高度和非 overflow: hidden。
使用场景：主导航放在页头下方、想让它在滚动过页头后才吸顶；或嵌套在某个 <section></section> 内部做局部固定。
立即学习“前端免费学习笔记（深入）”；
- 必须配合
top值（如top: 0）才生效，仅设sticky没用 - 父级不能有
transform、perspective或filter，否则会创建新的层叠上下文，使sticky失效 - IE 完全不支持，iOS Safari 低于 15.4 有部分 bug，生产环境建议加降级（如回退到
relative+ JS 监听 scroll）
浮动导航栏（float）已淘汰，别再用
用 float: left 搭配清除浮动来实现横向导航项，是 2000 年代的做法。它本质是为图文环绕设计的，强行用于导航会导致布局脆弱、垂直对齐困难、响应式适配成本高。现代项目中没有任何理由继续用 float 做导航条主结构。
容易踩的坑：父容器忘记清除浮动 → 高度塌陷；多行导航换行错乱；Flex/Grid 已原生支持等分布局和对齐，float 只会增加维护负担。
- 所有主流框架（Bootstrap、Tailwind）和 CSS-in-JS 方案都默认使用
display: flex或grid - 如果看到老项目里还在用
float写导航，优先重构为 Flex —— 一行display: flex; align-items: center;就能替代十几行浮动+清除代码
导航栏高度与滚动监听的协同处理
固定导航栏的实际高度会影响锚点跳转、滚动判断、甚至移动端 viewport 缩放。很多开发者只写 height: 60px，却没考虑 border、box-shadow、font-size 缩放或 iOS Safe Area 的干扰。
性能影响：用 scroll 事件监听滚动位置来动态增删 class（如添加 scrolled），若不做节流，会严重拖慢滚动帧率。
- 推荐用
getBoundingClientRect().top 判断是否已滚动过导航栏，比监听 <code>scrollTop更稳定 - 移动端需额外处理
env(safe-area-inset-top)，例如：height: calc(60px + env(safe-area-inset-top)) - 若用 JS 控制显隐（如滚动向下隐藏、向上显示），请用
requestAnimationFrame包裹逻辑，避免 layout thrashing
/* 示例：现代导航栏基础结构（Flex + Sticky） */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 1rem;
height: var(--navbar-height, 60px);
background: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
<p>@media (max-width: 768px) {
.navbar {
padding: 0 0.75rem;
}
}</p><p>.navbar.sticky {
position: sticky;
top: 0;
z-index: 1000;
}</p>导航栏看似简单，真正难的是在各种设备、缩放、滚动状态、无障碍需求下保持一致行为。固定高度、安全区、滚动监听、焦点管理——这些细节堆叠起来，才是实际交付时最耗时间的部分。
