JSFiddle - React, Tailwind, and code Playground

by Brodingo

HTML

<div id="footer">Hover meeeee
    <div id="content">
        <h2>LOL SUP?</h2>
    </div>
</div>

CSS

html {
    height: 100%;
}

body {
    font-family: sans-serif;
    background-color: #eee;
    background-image: -webkit-linear-gradient(top, #fff, #ccc);
}

#footer {
    position:fixed;
    bottom: -150px;
    left: 0;
    right: 0;
    height: 200px;
    padding: 20px;
    background: #333;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0,0,0,.5);
    -webkit-box-shadow: inset 0 1px 4px rgba(0,0,0,1);
}

#content {
    margin-top: 50px;
    padding: 10px;
}

JavaScript

//sticky footer bottom

$('#footer').hover(function(){
    $(this).animate({bottom: 0},{queue:false});
},function(){
    $(this).animate({bottom: -150},{queue:false});
});