intersectionobserver本身不直接检测吸顶，需用哨兵元素+getboundingclientrect()双重判断：在目标上方放1px哨兵，监听其离视口时机，并实时读取目标top≤0确认真实吸顶状态。
IntersectionObserver 本身不提供“吸顶”检测能力，它只告诉你元素是否进入/离开视口（或指定容器），而吸顶是 CSS position: sticky 的行为结果。你要检测的其实是“元素是否已吸顶”，不是“是否在视口里”——这两者语义不同，不能混用。
为什么直接用 isIntersecting 判断吸顶会出错
常见错误是监听目标元素自身，然后在 entry.isIntersecting === false 时认为它“吸顶了”。这完全不可靠：当用户快速滚动、元素刚贴顶但尚未触发 sticky 计算，或父容器有 transform 中断滚动上下文时，isIntersecting 可能为 false，但元素根本没吸顶；反之，元素已吸顶，却仍因部分像素在视口内导致 isIntersecting 为 true。
- 吸顶生效依赖于父容器的
overflow、transform、will-change等属性，这些不会影响 IntersectionObserver 的交叉判断 -
rootMargin调整的是“检测窗口”，不是“吸顶临界线”，设成'-1px'也不能精确对齐top: 0吸顶点 - SPA 中动态插入的 sticky 元素，可能在 Observer 初始化前就已完成吸顶，首次回调永远收不到状态
正确做法：监听哨兵元素 + 检查 getBoundingClientRect()
真正可控的方式是：在目标元素正上方放一个 1px 高的哨兵元素（如 <div class="js-sticky-sentry"></div>），用 IntersectionObserver 监听它是否“离开视口”，再结合 target.getBoundingClientRect().top 是否 ≤ 0 来双重确认吸顶状态。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 哨兵必须与目标同级或紧邻其上，且在文档流中（不能
display: none或visibility: hidden） - Observer 配置
{ threshold: 0, rootMargin: '-1px 0px 0px 0px' }，让哨兵顶部一离开视口就触发 - 回调中必须调用
target.getBoundingClientRect()实时读取位置，不能依赖entry.boundingClientRect（它反映的是哨兵的位置，不是目标） - 避免在回调里反复
unobserve/observe，只需toggle一个 class，交由 CSS 控制表现
CSS 必须配合验证 position: sticky 是否真生效
即使 JS 认为已吸顶，如果浏览器没真正应用 sticky，一切白搭。打开开发者工具的「Computed」面板，检查目标元素的 position 是否解析为 sticky，而不是回退成 static。
- 逐级向上检查父元素：任意一层有
overflow !== visible、transform !== none、will-change !== auto，都会中断 sticky 的滚动上下文 - 若父容器必须裁剪内容，不要直接设
overflow: hidden，改用clip-path: inset(0)或额外包一层无样式容器 - iOS Safari 12.2 以下不支持
rootMargin，做吸顶检测时需降级为window.onscroll+requestAnimationFrame防抖
最易被忽略的一点：吸顶检测不是一次性事件，而是滚动过程中的持续状态判断。你得接受它可能在单次滚动中反复切换 —— 这不是 bug，是 sticky 本身的渲染机制决定的。别试图“只触发一次”，重点是让 class 切换和 CSS 过渡足够顺滑，而不是追求 JS 层面的绝对精确。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
