如何使用JavaScript检测元素重叠(覆盖)？

Question

如何使用JavaScript检测重叠的HTML元素？

我有一个项目列表(<ul>)。它使用JavaScript上下滑动。当它向下滑动时，根据项数的不同，它可能会与另一个元素(<div>)重叠，该元素在此时是绝对定位的(可以更改)。

如何检测<ul>与此<div>重叠时，如何对<div>应用新样式以临时隐藏它或将其向下移动一点以防止重叠？

当它们重叠时，看起来并不好)

在这里您可以看到，我正在讨论的内容：http://timetable.raj.fvds.ru/

非常感谢!

Answer 1

function isObjOnObj(a,b){
    var al = a.left;
    var ar = a.left+a.width;
    var bl = b.left;
    var br = b.left+b.width;

    var at = a.top;
    var ab = a.top+a.height;
    var bt = b.top;
    var bb = b.top+b.height;

    if(bl>ar || br<al){return false;}//overlap not possible
    if(bt>ab || bb<at){return false;}//overlap not possible

    if(bl>al && bl<ar){return true;}
    if(br>al && br<ar){return true;}

    if(bt>at && bt<ab){return true;}
    if(bb>at && bb<ab){return true;}

    return false;
}

Answer 2

这感觉像是碰撞检测，并且刚刚发布了一个解决方案。相反，我建议计算出一个菜单需要多少列表项才能重叠(即10个)，并在这些菜单(具有10个li)被选中时隐藏div。

Answer 3

为什么不直接将UL的z索引提升到底部的div之上呢？

添加：

#wrap {
    z-index  : 2;
    position : relative;
}