固定头部后内容区域独立滚动的正确做法是：头部用position: fixed + top: 0并设明确高度，内容区用margin-top预留空间、height: calc(100vh - 头部高度)或父容器flex分配空间，并设overflow-y: auto；禁用html/body的overflow: hidden，避免iOS弹性滚动失效。
固定头部后内容区域如何独立滚动
直接给 body 加 overflow: hidden 或设 position: fixed 头部，会导致整个页面失去滚动能力——这是最常踩的坑。正确做法是让头部脱离文档流，同时为主要内容区域单独设置高度和溢出行为。
关键在于：头部用 position: fixed + top: 0，内容区用 margin-top 预留头部高度，并设置 height 和 overflow-y: auto。
- 头部必须有明确高度（如
height: 60px），内容区margin-top值需严格匹配 - 内容区需有可计算的高度来源：要么父容器设
height: 100vh，要么自身设max-height - 避免对
html或body设置overflow: hidden，否则 iOS Safari 会禁用弹性滚动
为什么用 100vh 而不是 100%
100% 依赖父元素高度，而 html 和 body 默认高度由内容撑开，结果往往是内容区高度为 0，滚动失效。用 100vh 是取视口高度，更可靠。
但要注意：100vh 在 iOS Safari 中可能包含地址栏高度，导致底部被遮挡；若需兼容，可用 min-height: -webkit-fill-available 作为降级。
- 推荐结构：
html { height: 100% }+body { margin: 0; height: 100% }+ 主容器height: 100vh - 如果页面有底部工具栏，内容区高度应为
calc(100vh - 60px - 44px)（头部 60px + 底部 44px） - 不要在固定头部上加
z-index: 9999这类魔数，用z-index: 10足够，避免后续层叠冲突
局部滚动区域触发不了 scroll 事件怎么办
当滚动发生在非 window 对象上（比如一个 div），window.addEventListener('scroll', ...) 完全收不到事件。必须监听具体容器的 scroll 事件。
另外，某些 CSS 属性（如 overscroll-behavior: contain）会阻止滚动传播，调试时可临时移除。
- 正确监听：
document.querySelector('.main-content').addEventListener('scroll', handler) - 获取滚动位置用
scrollTop，不是window.pageYOffset - 若用 React/Vue，注意 ref 绑定时机——DOM 渲染完成后再添加监听
- 移动端需确保容器有
-webkit-overflow-scrolling: touch（iOS Safari 旧版必需）
使用 position: sticky 的限制与替代场景
position: sticky 看似简单，但它依赖父容器有可滚动高度，且不支持嵌套滚动容器中的“局部 sticky”。一旦父容器未设 height 或 overflow，它就退化为 static。
真正需要“局部 sticky”（比如表格头在滚动区域中固定），必须用 JavaScript 监听 scroll 手动切换 position: fixed，或改用 IntersectionObserver 判断临界位置。
- 仅当头部是直接子元素、父容器有明确高度和
overflow-y: auto时，sticky才可靠 - IE 完全不支持
sticky，如需兼容，必须回退到fixed+ JS 方案 - 使用
sticky时，top值不能为百分比，只能是px、rem等绝对单位
固定头部本身不难，难的是滚动上下文的归属判断——到底是 window 滚动，还是某个容器滚动，这决定了事件监听对象、高度计算方式和兼容性补丁的落点。稍不注意，iOS 上滑不动、滚动条消失、sticky 失效，问题都出在这里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
