Shirinking Header in themeless einbauen

Für einen shrinking Header müssen wir zwei Dinge erldigen.

  1. Der Header muss die CSS-Definition fixed erhalten
  2. wir benötigen einen JS-Code, der der Logo beim scrollen verkleinert

 

Die CSS-Definitionen

#menu-custom {
  position: fixed;
}

#logo {
	transition-duration: .3s;
	height: 120px;
}

Damit überschreiben wir den Standardwert von "postion:absolute", aus dem Theme-CSS. Mit dieser Anweisung bleibt der gesamte Header immer am oberen Rand des Browsers.

Dem Logo-Element geben wir eine transition-duration von einer drittel Sekunde mit, damit die Animation flüssig angewandt wird.

Der JS-Code

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
	if (document.body.scrollTop > 60 || document.documentElement.scrollTop > 60) {
		document.getElementById("logo").style.height = "60px";
	} else {
		document.getElementById("logo").style.height = "120px";
	}
}

Die Funktion scrollFunction wird immer gefeuert, wenn der Bildschirminhalt gescrollt wird. Dann wird getestet, ob der Nutzer bereits mehr als 60 Pixel gescrollt hat. Ist dem so, wird nach dem Element mit der ID "logo" gesucht und seine höhe auf 60 Pixel gesetzt, andernfalls erhält das gleiche Element 120 Pixel in der Höhe. Hierbei kannst du natürlich eigene Werte einsetzen. Achte dabei, dass du den Wert im else (hier: 120px) immer mit der Grunddefinition im CSS gleich hast.