• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[SCRIPTSUCHE] Dynamische Größenanpassung des Headers

scrub

New member
[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?
 
Zuletzt bearbeitet:
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>
 
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');
    }   
});
 
Zurück
Oben