jQuery slideDown

by Tilwin Joy

HTML

<div class="header"></div>
<div class="page"></div>
<div class="overlay hide"></div>

CSS

* {
    /* prevent browser defaults*/
    margin:0px !important;
    padding:0px !important;
}
html, body {
    height:100%;
}
.header {
    height:15%;
    background: #0080FF;
}
.page {
    text-align:center;
    background: #58D3F7;
    min-height: 200%;
}
.overlay {
    position:fixed;
    bottom:0;
    width:100%;
    height:25%;
    background: #0040FF;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition:height .5s ease;
    -moz-transition:height .5s ease;
    -ms-transition:height .5s ease;
    transition:height .5s ease;
}
.hide {
    height:0 !important;
}

JavaScript

var sliderTop = $(window).height() - 150;
$(window).scroll(function () {
    var scrollTop = $(window).scrollTop();
    if (scrollTop > sliderTop) {
        if ($('.overlay').hasClass('hide')) $('.overlay').removeClass('hide');
    } else {
        if (!$('.overlay').hasClass('hide')) $('.overlay').addClass('hide');
    }
});