zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Headergröße dynamisch anpassen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 27.03.2015, 16:29
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.12.2008
Beiträge: 39
scrub befindet sich auf einem aufstrebenden Ast
Standard 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.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 30.03.2015, 11:04
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Fertige Lösung bekommst du hier nicht. Also was hast du bereits probiert und wo hängt es im speziellen?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 30.03.2015, 14:18
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.12.2008
Beiträge: 39
scrub befindet sich auf einem aufstrebenden Ast
Standard

Nachdem ich ein totaler JS-Noob bin, habe ich hier in der Tat auf eine fertige Lösung gehofft und kann leider nicht mit Code dienen. Aber dann bin ich hier wohl falsch.
Mit Zitat antworten
  #4 (permalink)  
Alt 31.03.2015, 10:06
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.12.2008
Beiträge: 39
scrub befindet sich auf einem aufstrebenden Ast
Standard

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');
    }   
});
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:04 Uhr.