JSFiddle - React, Tailwind, and code Playground

by NunoMira

HTML

<div id="buttonContactSite" class="buttonContactSiteStyle">
    Contactos
</div>
<div>
    <div style="width: 100%; background-color: yellow">
        AA<br>
        AA<br>
        AA<br>
        AA<br>
        AA<br>
        BB
    </div>
    <div id="footerSite" class="footerSiteStyle">
        Contactos<br>footer information
    </div>
</div>

CSS

.footerSiteStyle
{
    width: 100%; 
    background-color: lightgreen;
    
}
.buttonContactSiteStyle
{
    width: 100%; 
    height: 20px;
    background-color: lightgreen;
    position: fixed; 
    bottom: 0px;    
}

JavaScript

//Fixed footer
$(function()
{
    var resize =  function(ev)
    {
        var windowHeight = window.innerHeight;
        var bounding = $("#footerSite")[0].getBoundingClientRect();
        if (bounding.top < windowHeight-$("#buttonContactSite").height())
        {
             $("#buttonContactSite").css("display", "none");
        }
        else
        {
             $("#buttonContactSite").css("display", "");
        }
    };    
    resize();
    window.addEventListener("scroll", resize);
	window.addEventListener("resize", resize);
})