Eigenschaften offsetTop und offsetLeft von window

Die Position eines Elementes auf einer Webseite konnten wir überoffsetTop und offsetLeft ermitteln. Hierbei wird die Position immer abhängig zu dem zugehörigen Elternelement ermittelt. Nutzen wir die Abfrage direkt innerhalb vom body ermitteln wir den Abstand von der rechten oberen Ecke. Der ausgegebene Wert entspricht Pixeln.

Beide Eigenschaften werden vom unserem Browserobjekt „document“ zur Verfügung gestellt und sind nur lesbar.

Auch wenn das Browser-Fenster gescrollt wird, ändern sich diese Werte nicht.

Vorgehensweise:

  1. Ein Element auf der Website auswählen (hier bietet sich oft getElementById an).
  2. Von diesem Element kann nun über offsetTop bzw. offsetLeft der Pixelabstand zum Elternelement ermittelt werden.

Im folgenden Beispiel erhalten wir für unseren Steuerungsbereich den Abstand nach oben.

<!DOCTYPE html>
<html>
<head>
    <title>Beispiel Einsatz document.offsetTop </title>
<script>
</script>
<style>
	* {
		margin: 0;
		padding: 0;
	}
	header {
		height: 120px;
		background-color: orange;
	}
	nav {
		height: 30px;
		background-color: limegreen;		
		line-height: 30px;
		font-weight: bold;
	}
	article {
		height: 2500px;
		background-color: lightgrey;
	}
</style>
</head>
<body>
<header id="kopfbereich">
	Kopfbereich 
</header>
<nav id="steuerung">
	Navigation <span id="ylage">Positionsangabe</span>
</nav>
<article>
	Inhalt
</article>
</body>
</html>

Wenn wir uns jetzt die Pixelanzahl ausgeben lassen wollen, müssen wir ein „addEventListener“ auf die load-Funktion legen. Wir lassen uns im ID-Bereich „ylage“ die aktuelle Zahl ausgeben.

window.addEventListener("load", function() {
  let steuerungselement = document.getElementById("steuerung");
  let abstandvonoben = steuerungselement.offsetTop;
  document.getElementById('ylage').innerHTML = abstandvonoben;
} );

Was können wir mit diesen Informationen für das Design unserer Website anstellen?

Menüzeile nach Scrollen oben fixieren

Wir wollen, dass unsere Menüleiste (Steuerungselement) am oberen Rand nicht aus dem sichtbaren Bereich verschwindet sondern „kleben“ bleibt.

Zum Testen gibt es das fertige Beispiel unter:
https://www.javascript-kurs.de/beispielcode/beispiel-offsetTop.htm

Interessant wird die Position eines Elementes, wenn im Fenster gescrollt wurde und das Element entsprechend gewandert ist. Diese aktuellen X- und Y-Werte eines Elementes nach dem Scrollen auf einer Website sind einfach zu ermitteln. Dafür kann über JavaScript die Eigenschaft über window.pageXOffset und window.pageYOffset ausgelesen werden, was wir für unser Praxisbeispiel unten benötigen.

Wenn wir uns jetzt die aktuelle Pixelanzahl ausgeben lassen wollen, müssen wir ein „addEventListener“ auf die Scroll-Funktion legen. Wir lassen uns im ID-Bereich „ylage“ die aktuelle Zahl ausgeben.

window.addEventListener("load", function() {
  function scrollueberwachung() {
    let aktuelleYposition = window.pageYOffset;
    document.getElementById('ylage').innerHTML = aktuelleYposition;
  }
  window.addEventListener("scroll", scrollueberwachung);
} );

Hier benötigen wir also unseren offsetTop-Wert wie auch den Wert von pageYOffset:

  • Abstand von oben über offsetTop
  • aktueller Abstand durch scrollen über pageYOffset

Beide Werte kombinieren wir in unserem bisherigen JavaScript-Programm:

<script>
window.addEventListener("load", function() {
    let steuerungselement = document.getElementById("steuerung");
    let abstandvonoben = steuerungselement.offsetTop;

    function scrollueberwachung() {
        let aktuelleYposition = window.pageYOffset;
        document.getElementById('ylage').innerHTML = abstandvonoben + " / " + aktuelleYposition;
    }
    window.addEventListener("scroll", scrollueberwachung);
});
</script>

Wenn wir nun auf unserer HTML-Seite hoch- und runterscrollen, sehen wir wie sich der zweite Wert ändert. Wird der zweite Wert größer als der erste Wert, verschwindet unser Steuerungselement aus dem sichtbaren Bereich.

Jetzt können wir beide Werte einfach vergleichen und bei Bedarf unserem Steuerungselement eine CSS-Klasse zum Fixieren der Leiste hinzufügen bzw. die Klasse wieder entfernen.

	if (aktuelleYposition >= abstandvonoben) {
		steuerungselement.classList.add("festkleben")
	} else {
		steuerungselement.classList.remove("festkleben");
	}

Sobald der Wert von pageYOffset gleich oder größer wird als offsetTop kleben wir über CSS unser nav-Element fest:

Hierzu erstellen wir die Klasse .festkleben

    .festkleben {
        position: fixed;
        top: 0;
        width: 100%;
        opacity: 0.7;
    }
    .festkleben + article {
        padding-top: 30px;
    }

Den Bereich machen wir halbdurchsichtig, damit wir auch schön sehen, wie dahinter der Inhalt hochgescrollt wird.

Und hier der komplette Code:

<!DOCTYPE html>
<html>
<head>
    <title>Beispiel Menüzeile oben fixieren</title>
<script>
window.addEventListener("load", function() {
  let steuerungselement = document.getElementById("steuerung");
  let abstandvonoben = steuerungselement.offsetTop;
  function scrollueberwachung() {
    let aktuelleYposition = window.pageYOffset;
	if (aktuelleYposition >= abstandvonoben) {
		steuerungselement.classList.add("festkleben")
	} else {
		steuerungselement.classList.remove("festkleben");
	}
	document.getElementById('ylage').innerHTML = abstandvonoben + " / " + aktuelleYposition;
  }	
  window.addEventListener("scroll", scrollueberwachung);
  });
</script>
<style>
	* {
		margin: 0;
		padding: 0;
	}
	header {
		height: 120px;
		background-color: orange;
	}
	nav {
		height: 30px;
		background-color: limegreen;		
		line-height: 30px;
		font-weight: bold;
	}
	article {
		height: 2500px;
		background-color: lightgrey;
	}
    .festkleben {
        position: fixed;
        top: 0;
        width: 100%;
        opacity: 0.7;
    }
    .festkleben + article {
        padding-top: 30px;
    }
</style>
</head>
<body>
<header id="kopfbereich">
	Kopfbereich 
</header>
<nav id="steuerung">
	Navigation <span id="ylage">Positionsangabe</span>
</nav>
<article>
	Inhalt
</article>
</body>
</html>

pageXOffset & pageYOffset und alte Browser bzw. der gute alte IE vor der Version 9

Natürlich spucken uns die alten Browserversionen von Microsoft in die Suppe. Diese haben vor der Version 9 andere Befehle für das Auslesen der Positionen. Dieses Problem können wir abfangen:

if (window.pageXOffset !== undefined) { // IE8 und früher machen Probleme
    var aktuelleYposition = window.pageYOffset;
} else { // IE9 and earlier
    var aktuelleYposition = document.documentElement.scrollTop;
}

Und wenn es für die X-Richtung ist, dann gibt es für die alte IE-Versionen „document.documentElement.scrollLeft“

Bitte unterstützen Sie dieses Projekt

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bestellen Sie über folgenden Link bei Amazon:
Bücher über JavaScript

Sie können uns auch eine Spende über PayPal zukommen lassen.

Vielen Dank für Ihre Unterstützung

weitere eigene Projekte: