Header soll sich beim scrollen nach unten verkleinern inkl. Logo..Wie umsetzen?

Hallo zusammen,

ich bin ein wenig ratlos. Seit Stunden suche ich nach einer Quelle, wie ich am besten einen fixierten Header mit Jquery und CSS erstelle, der sich beim runterscrollen automatisch verkleinert. Inkl. Navigation und Logo (Image). Sollte vom Ergebnis her so aussehen wie in diesem Template.

Ich hoffe ihr könnt mir da behilflich sein. Ich bin dabei eine neue Webseite umzusetzen und ganz am Anfang. Anpassungen sind kein Problem. Vielen Dank für eure Hilfe.

Hier mal ein einfaches Muster, sollte an sich selbsterklärend sein.

Code:

---


  $(window).scroll(function(){
     
          if ($(this).scrollTop() > 50) {
                $( '.deineklasse' ).addClass( "deineklasseFixmenu" );                     
              }
            if ($(this).scrollTop() == 0) {
                    $( '.deineklasse' ).removeClass("deineklasseFixmenu");

                    }
        });

---

Müsstest es halt noch etwas ausbauen fürs logo ;) zb mit Transitions: http://css3.bradshawenterprises.com/transitions/

LG Socke

Danke für deine schnelle Antwort Socki :)