Javascript 在调用触发器之前，如何保持所有元素处于粘性位置？

我有一个页面，其中图像在滚动时缩小。一旦它达到一个特定的大小，另一个图像就会出现。从那里开始，滚动行为应与滚动方式相同

我现在的问题是，所有后续的

div

都没有“等待”这个图像更改事件。我只能告诉随后的第一个

div

停止，直到该事件发生，并在事件发生后将其

位置更改为
相对位置。但有了这个解决方案，情况似乎更糟了

我希望文本div在出现红色div之前不会移动。然后它应该从当前位置开始移动。
我可以自己（以某种方式）解决这个问题

我在带有图像的div之后的所有内容中添加了一个container div，并使其
不透明度：hidden
。滚动时，内容实际上是向上滚动的，但看不见。一旦图像发生更改，我将使用滚动距离（+一些缓冲区）的值向内容容器添加
边距顶部
，并删除
不透明度：隐藏
类


然而，这不是问题中描述的解决方案，内容应该是可见的，并且在其位置“等待”，但就我的情况而言，这是一个可接受的答案。但我不会让这成为我问题的公认答案