JSFiddle - React, Tailwind, and code Playground

by Ufuk Ozdemir

HTML

<div id="content">lorieum ipsum dolores lorieum ipsum dolores lorieum ipsum dolores lorieum ipsum dolores lorieum ipsum dolores lorieum ipsum dolores lorieum ipsum dolores lorieum ipsum dolores lorieum ipsum dolores lorieum ipsum dolores lorieum ipsum dolores lorieum ipsum dolores lorieum ipsum dolores lorieum ipsum dolores lorieum ipsum dolores lorieum ipsum dolores lorieum ipsum dolores lorieum ipsum dolores lorieum ipsum dolores lorieum ipsum dolores lorieum ipsum dolores lorieum ipsum dolores lorieum ipsum dolores lorieum ipsum dolores lorieum ipsum dolores lorieum ipsum dolores lorieum ipsum dolores lorieum ipsum dolores lorieum ipsum dolores lorieum ipsum dolores lorieum ipsum dolores lorieum ipsum dolores lorieum ipsum dolores lorieum ipsum dolores lorieum ipsum dolores lorieum ipsum dolores lorieum ipsum dolores</div>
<div id="sticky-footer">My awesome footer heye.....</div>
<div>other footerlorieum ipsum dolores lorieum ipsum dolores lorieum ipsum dolores lorieum ipsum dolores lorieum ipsum dolores lorieum ipsum dolores</div>

CSS

.fixed_footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: gray;
}
#sticky-footer {
    background-color: gray;
}
#content {
    height:1600px;
}

JavaScript

//save the existing postion of the footer
$footer = $('#sticky-footer');
$win = $(window);
var ipos = $footer.offset().top;
var wpos, space;

function h(e) {
    wpos = $win.scrollTop();
    space = $win.height() - $footer.height() * 2;
    if (wpos + space < ipos) {
        $footer.addClass('fixed_footer');
    } else {
        $footer.removeClass('fixed_footer');
    }
}
// this triggers the repositioning of the bar on all relevant events
$(window).ready(h).resize(h).scroll(h);