pageXOffset und pageYOffset – wie weit wurde gescrollt?
Über diese Werte kann man ermitteln, wie weit ein Fenster in X- und Y-Richtung gescrollt wurde – natürlich nur, wenn der Inhalt breiter bzw. länger als das Fenster ist und dieses deshalb gescrollt werden kann!
Im folgenden Beispiel wollen wir für eine Website auf das Herunterscrollen reagieren. Es soll sich dann automatisch der Kopfbereich der Webseite verkleinern damit mehr Platz für den Inhalt vorhanden ist (der Kopfbereich wurde ja bereits vom Besucher genügend gewürdigt). Dazu benötigen wir neben JavaScript noch HTML und CSS.
Als erstes der grundlegende Aufbau unserer HTML-Seite:
<!DOCTYPE html>
<html>
<head>
<title>Beispiel JavaScript automatisch Kopfbereich verkleinern</title>
<script>
</script>
<style></style>
</head>
<body>
<header id="kopfbereich">
Kopfbereich
<span id="ylage">Positionsangabe</span>
</header>
<article>
Inhalt
</article>
</body>
</html>
In unserem Kopfbereich packen wir noch zur Kontrolle einen SPAN-Bereich für den aktuellem Zahlenwert der Scrollposition mit der ID „ylage“
Hiermit haben wir unsere HTML-Seite. Jetzt wollen wir unseren header-Bereich und unseren Bereich für den Inhalt in CSS definieren.
Unser Kopfbereich bekommt:
- eine Höhe von 120 Pixel (die wir später verkleinern)
- wie kleben den Kopfbereich fest über „position: fixed;“
- daher müssen wir auch eine Breite von 100% festlegen
- einen netten Showeffekt mit „transition“ mit, damit die Aktion flüssig animiert wird
- eine Hintergrundfarbe (damit wir auch sehen, dass etwas passiert)
Unseren Inhaltsbereich article bekommt:
- eine Höhe, damit wir nicht unendlich viel Inhalt eintippen müssen sondern etwas zum Scrollen auch haben
- einen Innenabstand nach oben, damit er nicht hinter dem Kopfbereich verschwindet
- eine Hintergrundfarbe
Und hier die entsprechenden CSS-Anweisungen
<style>
* {
margin: 0;
padding: 0;
}
header {
height: 120px;
position: fixed;
width: 100%;
transition: all 0.4s;
background-color: orange;
}
article {
height: 2500px;
padding-top: 320px;
background-color: limegreen;
}
</style>
Überwachung des aktuellen Zustands der Scrollposition
Und nun sind wir bei unserem JavaScript-Bereich.
Wir wollen einen addEventListener erstellen, der in unserem Fenster die Scroll-Aktivitäten überwacht:
window.addEventListener("scroll", scrollueberwachung);
In unserer Funktion „scrollueberwachung“ lassen wir uns die aktuelle Scrollposition sofort zur Kontrolle im dafür vorgesehenen Kopfbereich ausgeben. Dazu benötigen wir eine Variable, der wir den Namen „abstandvonoben“ geben. Den durch window.pageYOffset ermittelten Wert lassen wir in unserem Kontrollbereich ausgeben:
<script>
window.addEventListener("load", function() {
function scrollueberwachung() {
let abstandvonoben = window.pageYOffset;
document.getElementById('ylage').innerHTML = abstandvonoben;
}
window.addEventListener("scroll", scrollueberwachung);
} );
</script>
Und nun können wir über eine einfache if-Abfrage überprüfen, wie weit vom Nutzer bereits auf der Webseite gescrollt wurde. In unserem Beispiel soll bei Werten über 100 Pixeln die Höhe des Kopfbereichs verkleinert werden. Dazu schaffen wir über die Variable „kopfelement” einen Zugriff auf unseren Kopfbereich.
<script>
window.addEventListener("load", function() {
let kopfelement = document.getElementsByTagName("header")[0];
function scrollueberwachung() {
let abstandvonoben = window.pageYOffset;
document.getElementById('ylage').innerHTML = abstandvonoben;
if (abstandvonoben > 100) {
kopfelement.style.height = "30px";
}
else {
kopfelement.style.height = "120px";
}
}
window.addEventListener("scroll", scrollueberwachung);
} );
</script>
Und das war es schon. Hier zur Sicherheit der komplette Code:
<!DOCTYPE html>
<html>
<head>
<title>Beispiel JavaScript automatisch Kopfbereich verkleinern</title>
<script>
window.addEventListener("load", function() {
let kopfelement = document.getElementsByTagName("header")[0];
function scrollueberwachung() {
let abstandvonoben = window.pageYOffset;
document.getElementById('ylage').innerHTML = abstandvonoben;
if (abstandvonoben > 100) {
kopfelement.style.height = "30px";
}
else {
kopfelement.style.height = "120px";
}
}
window.addEventListener("scroll", scrollueberwachung);
} );
</script>
<style>
* {
margin: 0;
padding: 0;
}
header {
height: 120px;
position: fixed;
width: 100%;
transition: all 0.4s;
background-color: orange;
}
article {
height: 2500px;
padding-top: 320px;
background-color: limegreen;
}
</style>
</head>
<body>
<header id="kopfbereich">
Kopfbereich
<span id="ylage">Positionsangabe</span>
</header>
<article>
Inhalt
</article>
</body>
</html>
Diesen Effekt sieht man bei vielen Internetauftritten. Wie man anhand des JavaScript-Programmcodes sieht, ist der Aufwand für diesen schönen Effekt sehr gering.
Kontrolle, ob Element oben anstößt
Wenn wir überprüfen wollen, ob ein Element oben „anstößt“ ist das auch möglich. Das werden wir machen, wenn wir „offsetTop“ kennen gelernt haben.
Dabei werden diese Werte spannend, wenn man diese mit einem Element auf der Seite vergleicht. Dadurch kann man beispielweise aus einer mitscrollenden oberen Navigationszeile dann nach Erreichen des oberen Bereichs dieses dann oben fixieren, damit diese immer sichtbar bleibt. Dies werden wir nach Einführung der Eigenschaften von offsetTop als Beispiel machen. Die Eigenschaft offsetTop gehört zu „document“ – daher muss es noch kurz warten.