JavaScript - Eine Animation ab einer bestimmten Scroll-Position starten

Eine Animation (oder was auch immer) ab einer bestimmten Scroll-Position im Browserfenster starten.

Damit die Animation nicht erst an der Oberkante des Elements beginnt, soll diese bereits gestartet werden wenn die rote Linie überschritten wird.

Hier das verwendete JavaScript um die Scroll-Position zu ermitteln und die Animation auszuführen. Unter: Animationen mit Keyframes gibt es weitere Beispiele.

<script>
window.addEventListener("load", function() {
 window.onscroll=function () {
 // Die Position des Elements von oben ermitteln
 var element = document.getElementById("Sun").offsetTop
  // Die Höhe des Elements mit der roten Markierung davon abziehen
  - document.getElementById("Markierung").offsetHeight;
   // Die aktuelle Scroll-Position ermitteln
  if (document.body.scrollTop > element ||
      document.documentElement.scrollTop > element) {
    // Die CSS-Klasse der Animation hinzufügen
    document.getElementById("Sun").className = "rising";
  }
  else {
    // Die CSS-Klasse der Animation wieder entfernen
   document.getElementById("Sun").className = "";
  }
 }
});
</script>