JSFiddle - React, Tailwind, and code Playground

by nitech

HTML

<html>
<head></head>
<body>
    <header>I am a beautiful header</header>
    <article>Stuff here<br/>Stuff here<br/>Stuff here<br/>Stuff here<br/>Stuff here<br/>Stuff here<br/>Stuff here<br/>Stuff here<br/>Stuff here<br/>Stuff here<br/>Stuff here<br/>Stuff here<br/>Stuff here<br/>Stuff here<br/>Stuff here<br/>Stuff here<br/>Stuff here<br/>Stuff here<br/>Stuff here<br/>Stuff here<br/>Stuff here<br/>Stuff here<br/>Stuff here<br/>Stuff here<br/>Stuff here<br/>Stuff here<br/>Stuff here<br/>Stuff here<br/>Stuff here<br/>Stuff here<br/>Stuff here<br/>Stuff here<br/>Stuff here<br/>Stuff here<br/>Stuff here<br/>Stuff here<br/>Stuff here<br/>Stuff here<br/>Stuff here<br/>Stuff here<br/>Stuff here<br/>Stuff here<br/>Stuff here<br/>Stuff here<br/></article>
    <footer class="sticky">I am footer</footer>
</body>
</html>

CSS

header {
    background:blue;
    display:block;
    color:white;
}
footer {
    background:red;
    width:100%;
    transition:all 0.5s ease-out;
}
footer.sticky {
    bottom:0;
    position:fixed;
    transition:all 0.5s ease-out;
}
footer.nonsticky {
    bottom:auto;
    position:auto;
}

JavaScript

$(document).ready(function(){
    /*
    $(window).scroll(function(){
        if ($(this).scrollTop() > 0)
        {
            $("footer").removeClass("sticky").addClass("nonsticky");
        }
        else {
            $("footer").removeClass("nonsticky").addClass("sticky");
        }
    });
    */
})