0
216
ViewsHow to detect image has overlap and show/hide upper image automatically when overlapping in javascript
I am working for a website. There is a fixed image in right side. Also there are images in body of webpage. When i scroll down the fixed image is overlap on body image. I want right side fixed image will hide automatically when both image is overlapping.
Please check above image. 22s text is upper image and light green is back image. so i want when 22s is overlapping over light green color. 22s image will hide automatically and show again when there is no overlapping.
below is css code and every image has id selector. so we can select both image by id in javascript. But how i can hide and show the upper image when overlapping.
.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 answers
Answer question0
You could use z-index:-1 for the fixed image. It should not hide it but also won't overlap your other images.
0
I think I found just the thing you are looking for. You should be able to do it using 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 and b are the two images and if the function returns true you can hide the image you want and if it false you can unhide it.
You can check this function using the scroll event listener so that every time the user scroll it will check if the two images are overlapping or not. Please let me know if you need more help.
reference: reference link