JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus eius autem quas rerum aperiam explicabo praesentium officiis quos placeat incidunt nam optio, debitis molestias maxime aut unde cum quo necessitatibus veniam voluptatem, culpa, cumque! Suscipit commodi eligendi quidem adipisci, vel omnis id sed. Esse deserunt nesciunt dolores laudantium minima nihil quam sit aperiam ipsum doloribus. Iste quibusdam, repellat in nam vitae, ea ratione commodi amet fugiat consequatur,</p>
    <div id="footer" class="footer"></div>
</div>

CSS

#footer {
    clear: both;
    height: 80px;
    padding: 0 0;
    background: #315B71;
    border-top: 8px solid rgb(29, 71, 93);
    width: 100%;
}

JavaScript

jQuery(document).ready(function ($) {

    var footerHeight = 0,
        footerTop = 0,
        $footer = $("#footer");
    positionFooter();

    function positionFooter() {

        footerHeight = $footer.outerHeight(); // changed
        footerTop = ($(window).scrollTop() + $(window).height() - footerHeight) + "px";

        if (($(document.body).height() + footerHeight) < $(window).height()) {
            $footer.css({
                position: "absolute"
            }).animate({
                top: footerTop
            }, -1)
        } else {
            $footer.css({
                position: "static"
            })
        }
    }

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

});