用 position: sticky 而不是 fixed，因其天然保留文档流占位，避免内容“上跳”和 padding-top 补位错位；且原生支持粘性临界点，无需 JS 模拟 top，规避响应式重排导致的 getBoundingClientRect 失准。
滚动时导航栏高度自动收缩，为什么用 position: sticky 而不是 position: fixed
因为 position: fixed 会让元素脱离文档流，后续内容会“上跳”，必须手动加 padding-top 补位，稍有误差就错位；而 position: sticky 天然保留占位，滚动中高度变化不会引发布局抖动。更重要的是，它支持原生的“粘性临界点”行为，无需 JS 模拟 top 值，也规避了 getBoundingClientRect().top 在响应式重排后失准的问题。
CSS 类名优先级冲突导致缩放不生效，怎么修
常见错误是这样写：#navbar { height: 145px; } + .sticky { height: 85px; } —— ID 选择器特异性远高于 class，.sticky 的 height 根本不会覆盖。必须统一用 class：
- 删掉所有
#navbar、#header这类 ID 选择器定义的高度 - 只用
.navbar定义默认状态，.navbar.is-sticky定义滚动后状态 - 确保两个 class 都在同级 specificity 下（比如都不带
!important）
scroll 事件里改 transform: scale() 为啥没反应
直接写 el.style.transform = 'scale(0.8)' 很容易失效，原因不止一个：
- 漏设
transform-origin: center（CSS 中预设，别靠 JS 动态加） - 元素原本有
rotate(2deg)或translateY(-2px)，行内 style 会整个覆盖，导致其他变换丢失 → 应该合并写：el.style.transform = 'rotate(2deg) scale(0.8)' - 缩放值没限幅，滚过头变成
scale(0.05)，视觉上消失 → 加Math.min(Math.max(0.4, scale), 1.2) - 没节流，Chrome 滚轮加速下每秒触发上百次 → 必须用
requestAnimationFrame包一层，且只在 RAF 回调里读window.scrollY
移动端滚动缩放卡顿或失效，关键在哪
iOS Safari 和 Chrome 的 scroll 事件在 overscroll（弹性拖拽松手后）阶段可能不触发，导致缩放“断层”。这不是 bug，是浏览器策略：
- 不要监听
touchmove来模拟 scroll 缩放 —— 它和原生滚动逻辑不同步，且需event.preventDefault()，极易引发手势冲突 - 真要兼容触控场景，用
IntersectionObserver监听导航栏是否“进入视口顶部区域”，比依赖scrollY更稳定 - 缩放公式别硬编码系数（如
0.001 * scrollY），改用归一化进度：const progress = Math.min(scrollY / window.innerHeight, 1)，这样在小屏和大屏上缩放节奏一致
最易被忽略的一点：缩放后的导航栏如果含文字，transform: scale() 会导致字体渲染变糊，尤其在 macOS 上。真正平滑的方案是用 font-size + height + line-height 组合切换，而不是只动 transform。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
