JSFiddle - React, Tailwind, and code Playground

by hannigan

HTML

<div>header</div>
<div style="border-color: red; height: 400px">content</div>
<div style="border-color: blue; height: 200px">bottom content</div>
<footer></footer>

CSS

html, body {
    height: 500px;
    background: #FAFAFA;
    margin: 0 auto;
    font-family: 'Helvetica';
}
footer {
    height: 45px;
    background: #CCC;
    position: fixed;
    bottom: 0;
    width: 100%;
}
div {
    width: 200px;
    height: 150px;
    border: 1px dashed #000;
    margin: auto;
    vertical-align: middle;
    line-height: 150px;
    text-align: center;
    margin-top: 10px;
}

JavaScript

$(document).scroll(function() {     
    if($(document).scrollTop() > 220) {   
        $('footer').css({
            'position': 'static' 
        });
    } else {
        $('footer').css({
            'position': 'fixed' 
        });
    }
});