Javascript 与父级中的下一个div冲突时淡出div

我有3个

div

包含文本和图像。我已将它们的位置设置为粘性。我的想法是，当底部div与顶部div发生碰撞时，将其淡出

我必须执行的一般想法是创建一个名为“is gone”的特殊css类，它基本上将不透明度设置为0，然后使用css使用淡出（使用

转换：不透明度0.5s ease

），然后编写一个JS来检测第n个和（n+1）之间的冲突然后将

类应用于n

然而，我不知道如何检测碰撞。我尝试了一些Java脚本，在其中循环遍历每个div，获取其
y
，添加其高度，然后在下一个div的
y
超出该值时进行检查。但是我甚至不能让代码在控制台中打印值哈哈哈

更新：

以下是在Edward Kotarski的帮助下得出的答案。
检测两个div之间交点的通用解决方案是：

intersects(elementA, elementB) {
   var a = elementA.getBoundingClientRect();
   var b = elementB.getBoundingClientRect();
   return !((b.left > a.right) ||
           (b.right < a.left) ||
           (b.top > a.bottom) ||
           (b.bottom < a.top));
}

相交（元素A、元素B）{
var a=elementA.getBoundingClientRect（）；
var b=elementB.getBoundingClientRect（）；
返回！（（b.左>a.右）||
（b.右a.底部）||
（b.底部

^这是通过检测元素不重叠的任何情况并反转结果来实现的

编写一个循环，循环遍历每个n，n+1对（使用此函数时您处于正确的轨道上），使用此函数检查相交，并触发淡入淡出

您可能希望将整个循环放入onScroll（或其他）事件中。
因此，基本上我创建了一个函数，用于检查两个JS对象是否相交。然后在一个on（'scroll'，…）事件中，我每次触发一个完整的循环？这不是效率太低吗？如果将现有div包装在父级中，并将滚动事件放在父级上（而不是文档上），则触发的频率会降低。除非你有成百上千的儿童div，否则电脑几乎不会注意到。让我来实现这一点。等等，我做到了！非常感谢。让我更新我的问题！非常感谢。如果你很高兴，那么请接受我的回答：）