There is a fixed Div at the bottom, I want to hide that fixed div when a footer div start showing in the screen when I scroll the page down and also show the fixed div back when I Scroll up.
.content{
height:600px;
font-size:30px;
display:flex;
align-items:center;
justify-content:center;}
.fixedDiv{
padding: 10px;
background-color: yellow;
position: fixed;
bottom: 5%;
left: 50%;
transform: translate(-50%, 0);
z-index: 10;
}
.footerDiv{
background:red;
height:300px;
width:100%;
font-size:30px;
display:flex;
align-items:center;
justify-content:center;
}
<div class="content">CONTENT
</div>
<div class="fixedDiv">Hide Me When Footer Comes</div>
<div class="footerDiv">FOOTER</div>