JSFiddle - React, Tailwind, and code Playground

by NunoMira

HTML

<div>
    <div style="width: 100%; background-color: yellow">
        AA<br>
        AA<br>
        AA<br>
        AA<br>
        AA<br>
        AA<br>
        AA<br>
        AA<br>
        AA<br>
        AA<br>
        AA<br>
        AA<br>
        AA<br>
        AA<br>
        AA<br>
        AA<br>
        AA<br>
        AA<br>
        AA<br>
        AA<br>
        AA<br>
        AA<br>
        AA<br>
        BB
    </div>
    <div class="footerstyle footerstyleposition" id="footer">
        Contactos
    </div>
    <div class="realfooterstyle" id="realfooter">
        Contactos<br>footer information
    </div>
</div>

CSS

.realfooterstyle
{
    width: 100%; 
    background-color: lightgreen;
    
}
.footerstyle
{
    width: 100%; 
    height: 20px;
    background-color: lightgreen;
}

.footerstyleposition
{
    position: fixed; 
    bottom: 0px;    
}

JavaScript

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