IntersectionObserver 可通过 rootMargin（如 "-10px 0px 0px 0px"）和 threshold: 0 精确控制元素距视口顶部触发时机；sticky 失效主因是滚动容器缺失 height/max-height 导致无滚动上下文，解决方案为设置高度或用 IntersectionObserver + translateY 模拟吸顶状态。
IntersectionObserver 怎么判断元素是否进入视口顶部
直接用 threshold 配合 rootMargin 控制触发时机，而不是监听“完全可见”。比如想让列表项在距离顶部 10px 时就开始准备吸顶，就设 rootMargin: "-10px 0px 0px 0px"。注意 rootMargin 是字符串，单位必须带（"-10px" 合法，-10 不合法）。threshold 设为 0 就够用——只要边界相交就触发，不用等 50% 进入。
Sticky 在滚动容器里为什么失效
因为 position: sticky 只对最近的**具有滚动约束的祖先容器**生效，而无限滚动列表通常用 overflow-y: auto 的父容器包裹。如果这个父容器没设 height 或 max-height，它就不会产生滚动上下文，sticky 就退化成 relative。解决办法只有两个：
– 给滚动容器加明确的 height 或 max-height；
– 或者不依赖 sticky，改用 transform: translateY() + IntersectionObserver 动态控制定位。
用 IntersectionObserver 模拟 sticky 的关键逻辑
核心是区分三种状态：未到达、正在吸顶、已离开。靠 entry.boundingClientRect.top 和 entry.rootBounds.top 的差值判断：
if (entry.intersectionRatio === 0 && entry.boundingClientRect.top > entry.rootBounds.top) {
// 已滚过，移除吸顶样式
el.classList.remove('is-sticky');
} else if (entry.boundingClientRect.top <= entry.rootBounds.top + 10) {
// 进入吸顶区（+10 是容错偏移）
el.classList.add('is-sticky');
}
注意别用 isIntersecting 判断“是否吸顶”，它只反映是否相交，无法区分“刚进”和“正待着”。真实场景中要持续监听 boundingClientRect.top 值做平滑过渡，否则快速滚动时会跳帧。
立即学习“前端免费学习笔记（深入）”；
性能陷阱：Observer 实例和回调怎么不拖慢滚动
无限列表动辄几百项，但不需要给每个 item 都配 Observer。只观察当前页及上下各 2 个 viewport 范围内的项即可。用 observer.unobserve(el) 主动清理已滚出可视区且不再需要监听的节点。另外，回调里避免触发重排——不要读写 offsetTop、getBoundingClientRect() 多次，更不要在里面调 el.style.top = ...。统一用 el.classList.toggle('is-sticky')，样式全由 CSS 控制。
复杂点在于滚动方向变化时的状态同步：上拉加载新项后，旧 Observer 可能还在监听已卸载的 DOM，容易报 Failed to execute 'unobserve' on 'IntersectionObserver': The target element is not a descendant of the specified root。所以每次增删节点后，必须确保 Observer 管理的节点集合与真实 DOM 一致。
