Fixed shrinking header with CSS animations and a smaller logo https://gist.github.com/srikat/9224884

shrinking_fixed_header.js

jQuery(function( $ ){
 
	$(".site-header").after('<div class="bumper"></div>');
 
	$(window).scroll(function () {
		if ($(document).scrollTop() > 50 ) {
			$('.site-header').addClass('shrink');
		} else {
			$('.site-header').removeClass('shrink');
		}
	});
 
});

shrinking_fixed_header_styles.css

  /* Shrinking fixed header, only for larger screens */
    @media only screen and (min-width: 840px) {
        .site-header {
            position: fixed;
            width: 100%;
            z-index: 999;
        }
        .title-area {
            padding-top: 16px;
            padding-bottom: 0;
        }
        .site-header .wrap, .bumper {
            min-height: 100px;
        }
        .site-header, .site-header .wrap, .site-description, .site-header .wrap .title-area, .header-image .site-title, .header-image .site-title a .widget-area.header-widget-area {
            -webkit-transition: all 0.5s ease-in-out;
            -moz-transition: all 0.5s ease-in-out;
            transition: all 0.5s ease-in-out;
        }
        .site-header.shrink {
            border-bottom: 1px solid #E8DEDA;
            min-height: 50px;
        }
        .shrink .wrap {
            background-color: rgba(255, 255, 255, 0.1);
            min-height: 60px;
            padding: 0;
        }
        .shrink .site-title {
            font-size: 20px;
            padding-top: 3px;
        }
        .header-image .shrink .site-title {
            padding: 0;
        }
        .header-image .shrink .site-title >a {
            min-height: 50px;
        }
        /* Use a smaller logo in the header after shrinking */
        .site-header.shrink .wrap .title-area {
            background: url("images/logo-mini2.png") no-repeat scroll left top rgba(0, 0, 0, 0);
            height: 50px;
            margin: 8px 0 0;
            -webkit-transition: all 0.5s ease-in-out;
            -moz-transition: all 0.5s ease-in-out;
            transition: all 0.5s ease-in-out;
        }
        .site-header.shrink .widget-area {
            padding-top: 5px;
            -webkit-transition: all 0.5s ease-in-out;
            -moz-transition: all 0.5s ease-in-out;
            transition: all 0.5s ease-in-out;
        }
    }