jQuery ? Beim Scrollen soll Header kleiner werden

[MetalForLive]

Hi,

Bin gerade dabei ne kleine Website zu basteln auf Basis von HTML/CSS.
Nun wollte ich wenn man scrollt, das der Header der Website kleiner wird damit mehr Platz für den Content ist.
Allerdings finde ich durch Google nicht wirklich was, weil ich überhaupt nicht weiß wonach ich genau suchen soll.
Ich vermute mal das lässt sich irgendwie mit jQuery realisieren.

Im Prinzip soll wenn man nach unten scrollt der Header einfach um die hälfte ca. kleiner werden sowie die Schriftgröße verändern.
Also müsste der Befehl irgendwie das CSS für das Header-div ändern sobald man scrollt, ist das so überhaupt möglich ?

 

[Lawnmower]

So irgendwie?
http://stackoverflow.com/questions/16442016/jquery-sticky-header-that-shrinks-when-scrolling-down

 

[MetalForLive]

Genau das, danke !

 

[Daaron]

Im Endeffekt ist das relativ trivial. Du klinkst dich in das Scroll-Event des Fensters ein, holst dir die Scrollposition und handelst entsprechend. Wirst ja evtl. nicht direkt anch dem ersten gescrollten Pixel die Navi umschalten wollen, sondern erst nach nem kleinen Stück.
Der einfachste Weg, aus dem Scroll eine geänderte Optik zu machen: Gib dem betroffenen Header-Bereich ne neue CSS-Klasse, sobald du unterhalb deiner "werd kleiner"-Schwelle bist, und nimm sie wieder weg, wenn du drüber scrollst. Der Rest ist CSS.

 

[MetalForLive]

Also wenn ich es so einzeln versuche dann klappt es, will ich es aber in meine Site einbinden, klappt es nicht.
Der Header legt sich jetzt über den Content so das man die Menüleiste nicht sieht.
Was mache ich falsch ?
Hier mal n Link Klick

 

[Daaron]

1.) Absolut und fixed positionierte Elemente werden aus dem Fluss ausgenommen.
2.) Abschreiben reicht eben nicht. Man muss es auch verstehen. Überleg noch einmal genau, was "$('#header')" bedeutet, und warum es bei dir keine Wirkung zeigt.

 

[MetalForLive]

Ich komm nicht drauf.
Als nicht-Anwendungsentwickler komme ich mit HTML/CSS ganz gut klar, aber Javascript wird kritisch.
Da verstehe ich größtenteils Bahnhof.

 

[Daaron]

Ja, aber dir ist doch sicher zumindest http://api.jquery.com/ über den Weg gelaufen, oder? Was macht der $-Operator? Nun, er ist erst einmal nur eine (optionale) Kurzform für jQuery(). Das Ding ist in erster Linie ein DOM-Selektor, der mit CSS-Selektoren gefüttert wird und Elemente zurück gibt. Und was ist #header für ein CSS-Selektor?

 

[Soedy]

Off-Topic, aber lustig, wie dies gestern bei CB umgesetzt wurde, kurz nachdem du gefragt hattest

 

[WhiteShark]

Das neue Design von cb gibt es aber zum testen schon länger :-)

Fixed heißt es ist aus dem Fluss draußen, was vereinfacht heißt, es nimmt keinen Platz weg und beeinflusst andere Elemente nicht.

 

[MetalForLive]

Hab den Fehler gefunden.
Ich hatte der ID vom div selbst noch CSS Parameter gegeben die dann die anderen Parameter überschrieben haben.