Ergebnis 1 bis 5 von 5
  1. #1
    scrub ist offline Grünschnabel
    registriert
    27-03-2015
    Beiträge
    3

    [Gelöst] Dynamische Größenanpassung des Headers

    Hallo zusammen,

    ich bin neu hier und habe natürlich gleich eine Frage bzw. bin auf der Suche nach einem Skript.
    Es geht um die dynamische Höhenanpassung eines Headers, wenn auf einer Seite nach unten gescrollt wird.

    Der Header (position: fixed; ) soll sich dabei um die Anzahl der Pixel verkleinern, die der User nach unten scrollt, allerdings natürlich nur bis zu einer festgelegten Mindestgröße.

    Bisher habe ich nur Scripts gefunden, die beim Überschreiten eines bestimmten Scrollwerts die Höhe auf einen festen Wert setzen, ich würde das eben gerne abhängig vom aktuellen Scrollwert machen.

    Beispiel:
    Scrollwert: 0 (ganz oben)
    Headerhöhe: 200px

    Scrollwert: 58
    Headerhöhe: 142px

    Scrollwert: 435
    Headerhöhe: 100px (Mindesthöhe vorgegeben).

    Wer kann mir helfen?
    Geändert von scrub (31-03-2015 um 09:03 Uhr)

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.678

    AW: Dynamische Größenanpassung des Headers

    Dazu musst einen Eventlistener auf das scoll-Event setzen und in diesem die Scrollposition auslesen. Wenn dieser kleiner als 100 ist, rechnest du die Größe aus und sonst setzt du sie auf 100:
    Code:
    <!DOCTYPE html>
    
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Fenstertitel</title>
    <style type="text/css">
    #header {
    	height: 200px;
    	background-color: blue;
    	position: fixed;
    	top: 0;
    	left: 0;
    	right: 0;
    }
    body {
    	height: 2000px;
    }
    </style>
    </head>
    <body>
    <div id="header"></div>
    <script type="text/javascript" src="http://kkjs.kkapsner.de/modules/kkjs.load.js?modules=scroll"></script>
    <script type="text/javascript">
    kkjs.event.add(window, "scroll", function(){
    	var header = kkjs.$("header");
    	var scrollTop = kkjs.scroll.getPosition().top;
    	if (scrollTop < 100){
    		header.style.height = (200 - scrollTop) + "px";
    	}
    	else {
    		header.style.height = "100px";
    	}
    });
    </script>
    </body>
    </html>

  3. #3
    scrub ist offline Grünschnabel
    registriert
    27-03-2015
    Beiträge
    3

    AW: Dynamische Größenanpassung des Headers

    Ja, perfekt!

    Tut genau das, was es soll.

    Das kann man doch bestimmt auch mit jQuery lösen, oder?

  4. #4
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.678

    AW: Dynamische Größenanpassung des Headers

    Geht sicher auch mit jQuery: https://api.jquery.com/bind/ und ich glaube https://api.jquery.com/scrollTop/

  5. #5
    scrub ist offline Grünschnabel
    registriert
    27-03-2015
    Beiträge
    3

    AW: Dynamische Größenanpassung des Headers

    Habe es raus:

    Code:
    body {
        height: 1000px;
    }
    
    .header {
        position: fixed;
        height: 250px;
        width: 100%;
    }

    Code:
    $(window).scroll(function(){
        var distanceFromTop = $(document).scrollTop();    
        if(distanceFromTop < 150 )
        {
            $('.header').css('height', '250' - $(document).scrollTop() + 'px');
        }
        else
        {
            $('.header').css('height', '100px');
        }   
    });

Ähnliche Themen

  1. [FRAGE] HTTP Basic Auth. via AJAX; Setzen des Auth-Headers auf Folgeseiten
    Von Kosta.Kos im Forum JavaScript
    Antworten: 6
    Letzter Beitrag: 13-12-2013, 16:05
  2. Mainbody in Tabelle - dynamische Größenanpassung
    Von hinkel11 im Forum CSS und (X)HTML
    Antworten: 3
    Letzter Beitrag: 06-03-2009, 12:45
  3. Größenanpassung an Auflösung
    Von Neoaxizz im Forum CSS und (X)HTML
    Antworten: 2
    Letzter Beitrag: 18-01-2009, 22:52
  4. Automatische Größenanpassung von Iframes
    Von Hero im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 27-07-2005, 11:49
  5. dynamische Größenanpassung bei JS-Fenster
    Von Metallica im Forum JavaScript
    Antworten: 5
    Letzter Beitrag: 19-07-2001, 10:23

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •