JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
<div class="content">CONTENT
</div>
<div class="fixedDiv">Hide Me When Footer Comes</div>
<div class="footerDiv">FOOTER</div>
</body>
</html>

CSS

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

JavaScript

$(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));
}