Absolute Position eines Elementes im Dokument mittels JavaScript

Manchmal ist es bei der Web-Entwicklung notwendig, den Beginn eines Elementes im Dokument bestimmen zu können, um damit diverse Interaktionen durchzuführen.

Anwendungsbeispiele sind zum Beispiel:

• Element ab einem gewissen Punkt „sticky“ zu machen
• Ab einer gewissen Scrolldistanz etwas einzublenden
• Etc

Dafür konnte ich in JavaScript keinen direkten Lösungsweg finden, der das ohne Umwege möglich macht. Mit dieser kleinen Hilfsfunktion (die ähnlich der von jQuery funktioniert) kann man aber genau diesen Wert ermitteln:

const offsetTop = (element) => window.pageYOffset + element.getBoundingClientRect().top;

// Anwendungsbeispiel
const target = document.querySelector('.target');
const targetOffset = offsetTop(target);

console.log(offsetTop);