JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <body>
        
        <div id="basement">
            
            <div id="wrapper">
                <div id="footer_border"></div>
            </div>
            
            <div id="footer"></div>
            
        </div>
        
    </body>
</html>

CSS

html, body {width: 100%; height: 100%;}

#basement {background: #FFF center bottom repeat-x scroll; width: 100%; min-height: 100%; height: auto !important; height: 100%; margin: 0 auto 0 0;}

#wrapper {position: relative; width: 380px; min-height: 1600px !important; height: auto; margin: 0 auto;}

#footer_border {position: fixed; width: 380px; margin:auto; bottom:0; height: 15px; z-index: 2; background: #999 center top repeat-x scroll;}

#footer {width: 380px; height: 125px; margin: 0 auto; clear: both; z-index: 1; background: #CCC;}

JavaScript

function checkOffset() {
    if ($('#footer_border').offset().top + $('#footer_border').height() >= $('#footer').offset().top - 10) $('#footer_border').css('position', 'absolute');
    if ($(document).scrollTop() + window.innerHeight < $('#footer').offset().top) $('#footer_border').css('position', 'fixed'); // restore when you scroll up
}
$(document).scroll(function() {
    checkOffset();
});