JSFiddle - React, Tailwind, and code Playground

by kodjoe mambi

HTML

<div style="height:2000px">

</div><div id="nav-book-now-fixed">Hide Me When Footer Comes</div>
<div class="sticky-calendar">FOOTER</div>

</div>

CSS

#nav-book-now-fixed{
    position: fixed;
    bottom: 30%;
}



.sticky-calendar{
height:300px;
width:100%;
}

JavaScript

$(window).scroll(function() {    
    if (isScrolledIntoView('.sticky-calendar') )
      $('#nav-book-now-fixed').css('visibility','hidden');      
    else{
      $('#nav-book-now-fixed').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));
}




myID = document.getElementById("nav-book-now-fixed");

var myScrollFunc = function () {
    var y = window.scrollY;
    if (y >= 300) {
        myID.className = "bottomMenu hide-book-now-fixed"
    } else {
        myID.className = "bottomMenu show-book-now-fixed"
    }
};

window.addEventListener("scroll", myScrollFunc);