折叠固定标题（在滚动）替换图像 - javascript

Question

我已经设法得到一个可折叠的固定标题的缩略当用户滚动过去某个点的工作版本，但我真正想要做的是有缩小状态下的实际图像变化。

这里是目前的标题http://kmmedia.com.au/test/index.html，你可以看到它缩小了图像。

我实际上希望图像的较小版本成为徽标的红色部分而没有写入（如此不同的图像）。喜欢这个网站http://byassociationonly.com/

我想有自己的填充，以获得初始状态，它的垂直居中，然后滚动有发言权10px的填充顶部和底部...

什么想法？

Answer 1

使用jQuery的动画...

$('header').animate({ 
     height: '47px'}, 300); 
    $('nav').animate({ 
     width: '80px'}, 300); 

，你可以在这里看到演示...

JS Fiddler Demo