JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>
<div></div>
<div></div>
<div></div>
<footer></footer>

CSS

div { width:200px; height:200px; border:1px solid gray;}
footer {height:100px; width:200px; background-color:red}
.fixed {
  position:fixed;
    bottom:0px;
    -webkit-backface-visibility:hidden;  
    
}

JavaScript

var footerHeight = 0,
           footerTop = 0,
           $footer = $("footer");
           
       positionFooter();
       
       function positionFooter() {
       
                footerHeight = $footer.height();
                footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";
       
               if ( ($(document.body).height()+footerHeight) < $(window).height()) {
                   $footer.css({
                        position: "absolute"
                   }).animate({
                        top: footerTop
                   })
               } else {
                   $footer.addClass('fixed');
               }
               
       }

       $(window)
               .scroll(positionFooter)
               .resize(positionFooter)