0
218
VistasCómo detectar que la imagen se superpone y mostrar/ocultar la imagen superior automáticamente cuando se superpone en javascript
Estoy trabajando para un sitio web. Hay una imagen fija en el lado derecho. También hay imágenes en el cuerpo de la página web. Cuando me desplazo hacia abajo, la imagen fija se superpone a la imagen del cuerpo. Quiero que la imagen fija del lado derecho se oculte automáticamente cuando ambas imágenes se superpongan.
Por favor revise la imagen de arriba. El texto 22s es la imagen superior y el verde claro es la imagen trasera. así que quiero cuando 22s se superpone sobre el color verde claro. La imagen de 22 s se ocultará automáticamente y volverá a mostrarse cuando no haya superposición.
a continuación se muestra el código css y cada imagen tiene un selector de identificación. para que podamos seleccionar ambas imágenes por id en javascript. Pero, ¿cómo puedo ocultar y mostrar la imagen superior cuando se superpone?
.sec { text-align: center; font-size: 15px; font-weight: 800; margin-top: -13px; padding: 20px; background-color: #0e3d04; color : white; height: 60px; width: 60px; border-bottom-left-radius: 40px; }2 Respuestas
Responde la pregunta0
Podría usar z-index:-1 para la imagen fija. No debería ocultarlo, pero tampoco se superpondrá a sus otras imágenes.
0
Creo que encontré justo lo que buscas. Debería poder hacerlo usando javascipt.
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; }a y b son las dos imágenes y si la función devuelve verdadero, puede ocultar la imagen que desea y si es falso, puede mostrarla.
Puede verificar esta función usando el detector de eventos de desplazamiento para que cada vez que el usuario se desplace, verifique si las dos imágenes se superponen o no. Por favor, hágamelo saber si necesita más ayuda.
referencia: enlace de referencia