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>