javascript - 当 div 与父级中的下一个 div 发生冲突时淡出 div

Question

我有 3 个包含文本和图像的 div。我已将它们的位置设置为 sticky。我的想法是在底部 div 与其发生碰撞时淡出顶部 div。

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

但是，我不知道如何检测碰撞。我已经尝试了一些 JavaScript，我循环遍历每个 div，获取它的 y，添加它的高度，然后检查下一个 div 的 y 是否超过该值。但是我连在控制台打印值的代码都拿不到哈哈哈

更新:

这是 code在 Edward Kotarski 的帮助下找到了答案。

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(或其他)事件中。