JSFiddle - React, Tailwind, and code Playground

by Oliver Kelso

HTML

<div id="wrapper">
<h1>jQuery Stickky Footer</h1>
    
    <p>this should have a footer that is always stuck to the bottom of the screen</p>
    
    <div id="lipsum">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum ullamcorper nunc, vitae posuere magna porta non. Cras consectetur lorem sed nisl dapibus nec viverra est ultricies. Ut dignissim lectus sed ipsum egestas iaculis iaculis orci sodales. Donec hendrerit, arcu in porta aliquam, lacus elit lobortis orci, ac luctus felis dolor eu arcu. Praesent mauris lacus, tempor nec iaculis ut, tempor id mi. Etiam quis metus eu ipsum venenatis tempor. Vestibulum non lacus vel erat interdum suscipit. Mauris lobortis faucibus turpis sed molestie. Fusce cursus tempus laoreet. Vestibulum placerat, dui varius vestibulum feugiat, enim augue tristique urna, in iaculis velit diam quis lacus. Cras id sodales lacus. Nullam tortor tortor, luctus at feugiat non, volutpat in dui. Donec mattis elementum sapien, sit amet hendrerit massa eleifend vitae. Duis vestibulum mattis nunc vitae vehicula. Praesent iaculis, velit vitae eleifend fringilla, arcu lorem vestibulum nisl, non cursus enim nisi id neque.
</p>

<p>
Curabitur arcu orci, sollicitudin vitae faucibus sit amet, pulvinar id quam. Integer bibendum consectetur scelerisque. Vivamus nec justo enim, id euismod lorem. Quisque sagittis metus mi, eu hendrerit nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris malesuada, ipsum suscipit eleifend aliquam, urna nisi hendrerit massa, vitae suscipit augue metus et diam. Integer eleifend, lectus sed fermentum tempor, lacus ligula facilisis mauris, sit amet facilisis lorem quam non lorem. Etiam at sem id ipsum dignissim vehicula quis sit amet metus. Ut ac nisl ante, sit amet pulvinar dui. Phasellus non massa erat, nec convallis urna. Curabitur vehicula porta augue id faucibus. Aliquam in diam sit amet metus hendrerit bibendum quis a nisl. Suspendisse lacus...

JavaScript

function positionFooter() {

    var mFoo = $("#footer");
	
    if ((($(document.body).height() + mFoo.outerHeight()) < $(window).height() && mFoo.css("position") == "fixed") || ($(document.body).height() < $(window).height() && mFoo.css("position") != "fixed")) {
        mFoo.css({
            position: "fixed",
            bottom: "0px"
        });
    } else {
        mFoo.css({
            position: "static"
        });
    }
}

$(document).ready(function () {
    positionFooter();
    $(window).scroll(positionFooter);
    $(window).resize(positionFooter);
    $(window).load(positionFooter);
});