Animate Fixed Header

/w CSS

by hannes

HTML

<script src="e	 //cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<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).on("scroll touchmove", function () {
    $('#header_nav').toggleClass('tiny', $(document).scrollTop() > 0);
});