logo/header scroll resize

how to: resize logo by scrolling

by pj_js15

HTML

<div id="header_nav" class="header">
    <div class="logo"></div>
</div>

CSS

body {
    height:1000px;
    width:100%;
    background-color:#eee;
}
.header {
    width:100%;
    height:100px;
    background: #26b;
    color: #000;
    position:fixed;
    top:0;
    left:0;
    transition: height 500ms, background 500ms;
}
.logo {
    background: url("http://placehold.it/200x100") no-repeat;
    width: 200px;
    height: 100px;
    transition: all 0.4s ease-in-out 0s;
}
.header.tiny {
    height:40px;
    background: #aaa;
    color: #fff;
}
.tiny .logo {
    background: url("http://placehold.it/40x40") no-repeat !important;
    width: 40px !important;
    height: 40px !important;
    transition: all 0.4s ease-in-out 0s;
}

JavaScript

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