jQuery ? Beim Scrollen soll Header kleiner werden

MetalForLive

Admiral

Registriert

Sep. 2011

Beiträge

8.108

• 28. März 2015

• #1

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

Maître de cuisine

Moderator

Registriert

Mai 2011

Beiträge

15.070

• 28. März 2015

• #2

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

 

MetalForLive

Admiral

Ersteller dieses Themas

Registriert

Sep. 2011

Beiträge

8.108

• 28. März 2015

• #3

Genau das, danke !

 

D

Daaron

Fleet Admiral

Registriert

Dez. 2011

Beiträge

13.487

• 28. März 2015

• #4

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

Registriert

Sep. 2011

Beiträge

8.108

• 29. März 2015

• #5

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

 

D

Daaron

Fleet Admiral

Registriert

Dez. 2011

Beiträge

13.487

• 29. März 2015

• #6

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

Registriert

Sep. 2011

Beiträge

8.108

• 29. März 2015

• #7

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.

 

D

Daaron

Fleet Admiral

Registriert

Dez. 2011

Beiträge

13.487

• 30. März 2015

• #8

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

• 31. März 2015

• #9

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

 

WhiteShark

Admiral

Registriert

Mai 2002

Beiträge

9.949

• 31. März 2015

• #10

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

Registriert

Sep. 2011

Beiträge

8.108

• 31. März 2015

• #11

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