当滚动时在屏幕上显示页脚Div时，隐藏固定的Div

Question

底部有一个固定的div，我想在向下滚动页面时在屏幕上显示页脚div时隐藏该固定的div，并在向上滚动时向后显示固定的div。

.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>

Answer 1

即兴创作了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/