|
|||
Headergröße dynamisch anpassen
Hallo zusammen,
ich suche nach einer Funktion, die mir die vertikale Scrollposition ausliest und die Headerhöhe daran dynamisch anpasst. Hintergrund ist, dass ich den Header gerne verkleinern würde, sobald nach unten gescrollt wird. Dabei sollte logischerweise eine bestimmte Headerhöhe nicht unterschritten werden. Alles, was ich bisher gefunden habe, basiert auf dem Prinzip, dass eine feste Ausgangshöhe mit einem festen kleineren Wert überschrieben wird, sobald der User an einer bestimmten Scrollposition angelangt ist oder diese überschritten hat. Ich hätte gerne eine Lösung, die etwa so aussieht: Scrollposition: 0 (ganz oben) Headergröße: 150px Scrollposition: 11 Headergröße: 139px (=150px -11) Scrollposition: 435 Headergröße: 100px (Mindesthöhe) Eigentlich müsste das umzusetzen sein, mein Problem ist nur, dass ich total JS-Noob bin. Daher wende ich mich an euch. Danke schonmal im Voraus. |
Sponsored Links |
|
|||
Habe es raus:
Code:
body { height: 2000px; } .header { position: fixed; height: 250px; width: 100%; } Code:
$(window).scroll(function(){ var distanceFromTop = $(document).scrollTop(); if(distanceFromTop < 150 ) { // reduce div height to 250px $('.header').css('height', '250' - $(document).scrollTop() + 'px'); } else { // set minimum div height to 100px $('.header').css('height', '100px'); } }); |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
externes iframe höhe dynamisch an inhalt anpassen | made.by.kaufmann | Javascript & Ajax | 4 | 30.04.2011 16:59 |
Content dynamisch anpassen | Nev0 | CSS | 3 | 26.11.2010 20:43 |
Listenelemente dynamisch an Breite anpassen | ronjambo | CSS | 16 | 26.03.2009 19:16 |
Kopf soll sich dynamisch der Auflösung anpassen. | mini04 | CSS | 20 | 15.08.2006 18:00 |
Höhe dynamisch anpassen - DIV-Layer Probleme | kc-tm | CSS | 15 | 01.06.2005 14:44 |