在与父

Question

我有3个divs包含文字和图片。我把他们的位置设定为sticky。我的想法是在底部div与它碰撞时淡出顶部div。

我必须执行此操作的一般想法是创建一个名为“is-gone”的特殊css类，它基本上将不透明度设置为0，然后使用CSS淡化（使用transition: opacity 0.5s ease）然后写入一个JS，用于检测第n个和第（n + 1）个孩子之间的冲突，然后将is-gone类应用于n。

但是，我无法弄清楚如何检测碰撞。我已经尝试了一些JavaScripts，我循环遍历每个div，得到它的y，添加它的高度，然后检查下一个div的y是否超出该值。但是我甚至无法获得在控制台中打印值的代码hahaha

更新

在Edward Kotarski的帮助下，这是答案的code。

Answer 1

检测两个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));
}

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

写一个循环，遍历每个n，n + 1对（你在这个轨道的右边），检查与此函数的交叉，并触发淡入淡出。

您可能希望将整个循环放在onScroll（或其他）事件中。