JSFiddle - React, Tailwind, and code Playground

by Reigel Gallarde

HTML

<div id="wrapper">
    <div id="header"> Header </div>
    <div id="content-wide"> Content 
    </div>
    <div id="footer">Footer</div>
</div>

CSS

#wrapper { border:1px solid #333; padding:10px;}
#footer { background:#333; color:#fff; width:98%}

JavaScript

//footer stick
$(window).bind("load", function() {

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

    positionFooter();

    function positionFooter() {
        footerHeight = $footer.outerHeight();
        footerTop = ($(window).scrollTop() + $(window).height() - footerHeight) + "px";
        if (($(document.body).height() + footerHeight) < $(window).height()) {
            $footer.css({
                'margin-top': footerTop
            });
        }
    };
    $(window).scroll(positionFooter).resize(positionFooter);
});