Hide a fixed Div, when footer Div shows up in the screen while scrolling

Question

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>

This could be helpful https://stackoverflow.com/questions/21561480/trigger-event-when-user-scroll-to-specific-element-with-jquery — Murali Nepalli, May 06 '19 at 06:55
Please check the complete solution and jsfiddle i posted below. If it works please consider accepting my answer. — Murali Nepalli, May 06 '19 at 07:17

score 2 · Accepted Answer · answered May 06 '19 at 07:16

2

After improvising this little How to Check if element is visible after scrolling?

$(window).scroll(function() {    
   if (isScrolledIntoView('.footerDiv') )
     $('.fixedDiv').css('visibility','hidden');      
   else{
     $('.fixedDiv').css('visibility','visible');
  }
});


function isScrolledIntoView(elem) {
  var docViewTop = $(window).scrollTop();    
  var docViewBottom = docViewTop + $(window).height();

  var elemTop = $(elem).offset().top;    
  var elemBottom = elemTop + $(elem).height();   

  return ((elemTop < docViewBottom));
 }

https://jsfiddle.net/t0uogj3v/

answered May 06 '19 at 07:16

Murali Nepalli

1,588
8
17

Thank You, Murali, The Solution Worked. – Arjun Pandi May 07 '19 at 05:44
I Marked the answer but it shows "Thanks for the feedback! Votes cast by those with less than 15 reputation are recorded, but do not change the publicly displayed post score." – Arjun Pandi May 07 '19 at 06:24

Hide a fixed Div, when footer Div shows up in the screen while scrolling

1 Answers1