position: sticky 是实现最简吸顶导航的首选方案，需设置 top 值（如 top: 0），父容器须有可滚动上下文（如 overflow-y: auto 或足够高度），且不能存在 overflow: hidden、transform 或 flex/grid 对齐干扰；不兼容 IE，移动端需注意 Safari 15.4+ 才完整支持。
用 position: sticky 实现最简吸顶导航
直接给导航容器加 position: sticky 和 top: 0 就能生效，但前提是它有可滚动的父容器（通常是 <body> 或某个带 overflow-y: auto 的祖先）。浏览器会把它“粘”在视口顶部，直到滚动出父容器范围才停止吸顶。
常见错误是把 position: sticky 加在 <header> 上却忘了检查它的父级是否设置了 height 或 max-height —— 如果父容器高度不够、内容没溢出，就根本不会触发滚动，sticky 就形同虚设。
- 必须设置
top值（如top: 0），否则不生效 - 父容器不能是
display: flex且未设align-items: flex-start，否则可能被 flex 对齐“顶上去”，导致初始位置偏移 - 移动端 Safari 15.4+ 才完整支持
sticky在<body>直接子元素上的表现，老版本需包裹一层<div>
为什么 position: fixed 不适合纯吸顶场景？
position: fixed 会让元素完全脱离文档流，导致后续内容“上浮”填补空位，页面布局塌陷。除非你手动给下一个兄弟元素加 margin-top 补高，否则视觉和交互都会错乱。
更麻烦的是：fixed 元素默认相对于视口定位，如果导航条本身有阴影、边框或背景渐变，滚动时容易和下方内容产生 z-index 层叠冲突；而且它不会随父容器宽度变化自动适配（比如侧边栏收起时，fixed 导航可能还卡在旧宽度位置）。
立即学习“前端免费学习笔记（深入）”；
- fixed 需要额外 JS 监听
scroll来控制显隐，而 sticky 是纯 CSS 行为，无性能开销 - fixed 元素无法响应父容器的
transform或perspective，在复杂动效页中容易“飞出去” - 若页面有横向滚动，fixed 导航不会随内容一起滚动，出现错位
兼容性兜底：IE 和老 Android WebView 怎么办？
IE 完全不支持 sticky，老版 Android WebView（Chrome scroll + 动态切 class：
const nav = document.querySelector('.nav');
const offsetTop = nav.offsetTop;
window.addEventListener('scroll', () => {
if (window.scrollY >= offsetTop) {
nav.classList.add('nav--fixed');
} else {
nav.classList.remove('nav--fixed');
}
});
对应 CSS 中定义 .nav--fixed { position: fixed; top: 0; width: 100%; }，并确保 body 有 padding-top 避免内容被遮挡。
- 别用
getBoundingClientRect().top替代offsetTop，后者更稳定（不受滚动中 layout 变化影响） - 记得加
throttle或requestAnimationFrame节流，否则快速滚动时 JS 会卡顿 - 移动端要注意
scroll事件在 iOS Safari 中的触发时机问题，可用touchmove+requestAnimationFrame组合补漏
吸顶后内容被遮挡？检查这几个地方
最常被忽略的是：吸顶导航虽然“粘”住了，但它原本占据的文档流空间还在，后续内容并不会自动下移 —— 这其实是 sticky 的设计本意，但新手常误以为它会像 fixed 那样腾出空白。
真正需要“留白”的地方，应该由开发者主动处理。比如导航高 60px，就在主体内容区域加 margin-top: 60px 或用 padding-top；如果导航高度动态（比如响应式折叠），就得用 JS 更新这个值。
- 不要给导航自身加
margin-bottom试图“推开”下面内容 —— sticky 后它已脱离流，这个 margin 不起作用 - 如果用了 CSS 自定义属性（如
--nav-height: 60px），记得在 JS 切换 fixed 状态时同步更新该变量 - 当导航含
box-shadow且背景透明时，吸顶后可能和下方内容重叠，此时需加z-index: 1000显式提升层级
offsetParent 可能不是你以为的那个元素。 
