Animate Fixed Header

/w CSS

by envira

HTML

<div id="header_nav" class="header">nav here</div>

CSS

body {
    height:1000px;
    width:100%;
    background-color:#eee;
}
.header {
    width:100%;
    height:100px;
    background: #26b;
    color: #fff;
    position:fixed;
    top:0;
    left:0;
    transition: height 500ms, background 500ms;
}
.header.tiny {
    height:40px;
    background: #aaa;
}

JavaScript

$(window).scroll(function () {
    if ($(document).scrollTop() == 0) {
        $('#header_nav').removeClass('tiny');
    } else {
        $('#header_nav').addClass('tiny');
    }
});