Cambiar tamaño de logotipo al hacer scroll en una web con jQuery

El efecto que queremos conseguir es algo parecido a lo que se muestra en el logotipo de la web de IBM: http://www.ibm.com/es/es/

El HTML del logo sería algo así como:

<div id="logo-div">
   <a id="logo-img" href="https://luismi.sanchezarteaga.es/"></a>
</div>

Y la función de jQuery para cambiarlo de tamaño al hacer scroll sería algo así (la imagen cambiaría de tamaño al hacer 200px de scroll hacia abajo y volvería a su tamaño original al hacer scroll al inicio de la página). Esta función nos sirve tanto para cambiar el tamaño de la imagen del logo, como para cambiar la propia imagen:

jQuery(function(){
    jQuery(window).scroll(function(){
        if(jQuery(this).scrollTop() > 200) {
            jQuery('#logo-img img')
                .css({'width':'351px','height':'63px'})
                .attr('src','https://luismi.sanchezarteaga.es/contenido/uploads/2014/02/luismi.sanchezarteaga1.png');
        }
        if(jQuery(this).scrollTop() < 200) {
            jQuery('#logo-img img')
                .css({'width':'196px',
                'height':'166px',
		'-webkit-transition':'all 0.5s ease',
		'-moz-transition':'all 0.5s ease',
		'-ms-transition':'all 0.5s ease',
		'-o-transition':'all 0.5s ease',
		'transition':'all 0.5s ease'
                	})    
                .attr('src','https://luismi.sanchezarteaga.es/contenido/uploads/2014/02/logo2.png');
        }
    });
});

Puedes juguetear con los diferentes resultados en JSFiddle: