position: sticky 实现吸顶需满足父容器有明确高度或溢出行为，禁用 overflow: hidden/clip，避免 flex 直接子项问题，配合 z-index 和响应式媒体查询；不支持时降级 fixed 并添加占位元素，优先用 CSS.supports 检测并用 IntersectionObserver 替代 scroll 监听。
用 position: sticky 实现吸顶，但必须满足父容器条件
position: sticky 是最轻量、无需 JS 的吸顶方案，但它不是“设了就粘”。关键限制是：目标元素的**最近滚动祖先（通常是父容器）必须有明确的高度或溢出行为**，否则它会退化为 position: relative。
常见错误现象：top: 0 写了，滚动时导航栏完全不吸顶，控制台也无报错。
- 确保父容器没设置
overflow: hidden或overflow: clip（会切断 sticky 行为） - 父容器高度不能是
auto且内部无足够内容撑开——可临时加min-height: 100vh测试 - sticky 元素不能是 flex 容器的直接子项且父项设了
align-items: stretch（某些旧版 Safari 下失效） - 务必写
z-index（行内样式或在同级规则中声明），否则可能被其他元素遮挡
移动端小屏下吸顶导航要配合 @media 调整布局
单纯吸顶不等于响应式。小屏设备上，如果导航项横向排不开，就会换行、溢出或重叠——position: sticky 不解决内容适配问题。
典型使用场景：桌面端水平导航，小屏（如 max-width: 768px）切换为汉堡菜单 + 垂直列表。
立即学习“前端免费学习笔记（深入）”；
- 先用
display: flex+flex-wrap: wrap让导航项自动折行（中等屏友好） - 在
@media (max-width: 480px)中隐藏原导航项，显示.burger按钮和.mobile-menu容器 - 注意：吸顶的
.navbar容器本身也要在媒体查询里设height: auto，避免固定高度截断内容 - 若用 JS 控制菜单展开，记得给
.mobile-menu加position: fixed或absolute，并设top: 60px（避开吸顶栏）
position: fixed 是兼容兜底方案，但需手动占位
IE 和部分老 Android WebView 不支持 sticky，这时得降级到 fixed。但它会脱离文档流，导致下方内容上移——必须补一个占位元素。
错误做法：只加 position: fixed; top: 0; width: 100%，结果正文从顶部开始渲染，被导航栏盖住。
- 在
.navbar后面紧跟一个同高占位<div class="navbar-placeholder"></div> - 占位元素 CSS：
height: 60px; visibility: hidden;（不用display: none，否则不占空间） - JS 动态控制时，监听
scroll并切换.navbar的fixed类，同时同步控制占位元素显隐 - 注意：fixed 元素的
width: 100%是相对于视口，不是父容器；如有左右 padding，需用left: 0; right: 0;替代
性能敏感场景下慎用 scroll 事件监听吸顶
虽然 JS 方案灵活（比如滚动超过某区域才吸顶、加阴影、缩放 logo），但直接绑 window.addEventListener('scroll', ...) 在低端机上极易掉帧。
容易踩的坑：没节流、没用 passive: true、反复读取 getBoundingClientRect()。
- 优先用
CSS.supports('position', 'sticky')检测支持性，仅对不支持的 UA 注入 JS 逻辑 - 用
IntersectionObserver替代 scroll 监听判断是否到达临界位置（更高效，且自动节流） - 若必须用 scroll，至少加上
{ passive: true }，并在回调里用requestAnimationFrame批处理样式变更 - 避免在吸顶逻辑里触发布局重排（如读取
offsetTop后立刻设style.top），改用transform: translateY()动画更稳妥
sticky 的父容器约束、小屏布局断裂、fixed 的占位遗漏、以及 scroll 监听的性能失控，这四点最容易在线上突然暴露。 
