JSFiddle - React, Tailwind, and code Playground

by neal_fletcher

HTML

<div class="content">
    THIS IS CONTENT<br/>
    THIS IS CONTENT<br/>
    THIS IS CONTENT<br/>
    THIS IS CONTENT<br/>
    THIS IS CONTENT<br/>
    THIS IS CONTENT<br/>
    THIS IS CONTENT<br/>
</div>

<div id="footer">
    Sticky Footer
</div>

CSS

body {
    margin: 0px !important;
}

.content {
    position: relative;
    width: 100%;
    height: auto;
    margin-bottom: 100px;
}

#footer {
    height: 100px;
    background-color: pink;
    width: 100%;
    left: 0;
}

JavaScript

// Window load event used just in case window height is dependant upon images
$(document).ready(function () {

    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.css({
                position: "relative"
            })
        }

    }

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

});