Kakarotto adlı üyeden alıntı

Zor bir şey değil aslında. jQuery scrollTop özelliği ile yapılabilir.
Denemedim ama şöyle bir şeyin işe yaraması lazım;

$(window).scroll(function(){
if($(this).scrollTop()>300){ /* 300 px aşağı kayınca aktif olur */
$( "#header" ).addClass( "header_ufalt" );
}
else{
$( "#header" ).removeClass( "header_ufalt" );
}
});

Yukarıdan 300px aşağıya inince varolan #header id'sine .header_ufalt diye bir sınıf ekler. Bu .header_ufalt sınıfınıda cssde kafana göre düzenlersin.

Örneğin;
.normal_header .logo{width:500px; height:300px}
.normal_header.header_ufalt .logo{width:100px;height:100px;}


http://jsfiddle.net/vQ85B/1/ => sağ tarafta aşağı doğru 300px inersen header küçülür.

Yani çalışma mantığı bu.

Kakarotto adlı üyeden alıntı

Zor bir şey değil aslında. jQuery scrollTop özelliği ile yapılabilir.
Denemedim ama şöyle bir şeyin işe yaraması lazım;

$(window).scroll(function(){
if($(this).scrollTop()>300){ /* 300 px aşağı kayınca aktif olur */
$( "#header" ).addClass( "header_ufalt" );
}
else{
$( "#header" ).removeClass( "header_ufalt" );
}
});

Yukarıdan 300px aşağıya inince varolan #header id'sine .header_ufalt diye bir sınıf ekler. Bu .header_ufalt sınıfınıda cssde kafana göre düzenlersin.

Örneğin;
.normal_header .logo{width:500px; height:300px}
.normal_header.header_ufalt .logo{width:100px;height:100px;}


http://jsfiddle.net/vQ85B/1/ => sağ tarafta aşağı doğru 300px inersen header küçülür.

Yani çalışma mantığı bu.