jQuery ? Beim Scrollen soll Header kleiner werden

MetalForLive

Admiral
Dabei seit
Sep. 2011
Beiträge
7.573
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 ?
 

MetalForLive

Admiral
Ersteller dieses Themas
Dabei seit
Sep. 2011
Beiträge
7.573
Genau das, danke !
 

Daaron

Fleet Admiral
Dabei seit
Dez. 2011
Beiträge
13.487
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

Admiral
Ersteller dieses Themas
Dabei seit
Sep. 2011
Beiträge
7.573
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

Fleet Admiral
Dabei seit
Dez. 2011
Beiträge
13.487
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

Admiral
Ersteller dieses Themas
Dabei seit
Sep. 2011
Beiträge
7.573
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

Fleet Admiral
Dabei seit
Dez. 2011
Beiträge
13.487
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?
 
S

Soedy

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

WhiteShark

Admiral
Dabei seit
Mai 2002
Beiträge
9.910
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

Admiral
Ersteller dieses Themas
Dabei seit
Sep. 2011
Beiträge
7.573
Hab den Fehler gefunden.
Ich hatte der ID vom div selbst noch CSS Parameter gegeben die dann die anderen Parameter überschrieben haben.
 
Top