我想，这里有两件事需要注意。

**首先，**Intersection Observer（沿着Resize Observer）不是在在线沙箱中测试的最佳工具，因为它们在iframe中运行代码，这会导致这样的行为。您应该尝试在浏览器中运行代码。

存在与此问题相关的问题。例如：In codepen, Intersection observer has different behavior from browser window

**第二，**你可能误解了rootMargin。你把它设置成0% 0% 60% 0%，意思是“把根的60%的高度加到根上，并把它作为交集的下边界”。

你实际上想要的是减少下边框，而不是增加。所以，只要把它设置为0% 0% -40% 0%，它就会工作。
X1 E1 F1 X帮助我理解了X1 M4 N1 X的怪异之处。也许它对你也会有用。

演示版

这是我修改的代码片段，我添加了一个container节点，并使用它来代替window。
第一个

可改进之处

另外，如果你对我的动画方法有任何反馈，我很高兴收到批评/更好的方法。
好吧，你当然应该考虑一下在交叉点开始后你会有一个滚动监听器。如果你不删除它，它会挂起。或者更糟糕的是，它们会在每次交叉点增加。这不是一件好事。
此外，最好是制作transform动画，而不是left。这有利于优化。否则，你会得到垃圾动画，这将冻结整个网站。web.dev/animations/。