$(document).ready(function(){
var __bannerHeight = $( window ).height();

$(window).scroll(function(){
var window_scroll = parseInt($(document).scrollTop());
if(window_scroll >= __bannerHeight) {
$(“#header”).addClass(“small-header”);
} else {
$(“#header”).removeClass(“small-header”);
}
});

});

Css

.small-header {
    padding: 15px 0;
}
#header {
    padding: 50px 0;
    transition: all 0.5s ease-in-out 0s;
}
Advertisements