¿Cómo detectar la superposición de elementos (superposición) usando JavaScript?

Question

Cómo detectar la superposición de elementos HTML, mediante JavaScript?

Tengo una lista de artículos (<ul>). Se desliza hacia arriba y hacia abajo usando JavaScript. Cuando se desliza hacia abajo, dependiendo del número de elementos, puede superponerse con el otro elemento (<div>), que está en su posición absoluta en este momento (se puede cambiar).

¿Cómo puedo detectar, cuando se superpone <ul> este <div>, para aplicar el nuevo estilo a la <div> para ocultarlo temporal o para mover hacia abajo un poco, para evitar la superposición?
Es que no ve bien, cuando se superponen))

Aquí se puede ver, lo que estoy hablando: http://timetable.raj.fvds.ru/

Muchas gracias!

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

¿Por qué no simplemente elevar el índice z de su UL para estar por encima del div en la parte inferior?

complemento:

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

Answer 3

Esto se siente como detección de colisiones, y no hay una solución justa publicado. En su lugar, sugeriría calcular cuántos elementos de la lista se necesitarían para que un menú se superponga (es decir, 10), y ocultar el div cuando se seleccionen esos menús (con 10 li).