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 的差值判断：
isIntersecting
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
