IntersectionObserver mit root-Element

[Rolf B]

Hallo Nico R.,

Hab ich das mit dem root-Element falsch verstanden?

Ja. Das Root-Element muss ein Elternelement Vorfahre des beobachteten Elements sein, sonst geht's nicht. Lässt Du root weg oder setzt es auf null, ist das "Elternelement" „Vorfahrenelement“ der Browserviewport.

Damit bleibt jetzt aber die Frage offen, wie Du elegant eine „Kollision“ zwischen nav und #container erkennst. Antwort: Nicht mit einem Observer. Dir bleibt wohl nur, das scroll-Event zu behandeln und (mit Häufigkeitslimitierung) zu testen, ob die BoundingRects von nav und #container sich überlappen.

In Deinem Fall reicht dazu die Abfrage, ob die Oberkante von #container oberhalb der Unterkante von nav liegt, also

if (container.getBoundingClientRect().top 
      < nav.getBoundingClientRect().bottom) {
   // Überlappung
}

Da getBoundingClientRect eine Layoutphase im Browser triggert, muss man diesen Aufruf über einen Throttler laufen lassen. Wir haben sowas im Wiki: hier

Einfach zu Beginn des Scripts einbauen, er erweitert Funktionen um eine Methode throttle, wodurch man eine „gebremste“ Version der Funktion bekommt.

Function.prototype.throttle = ...

function scrollHandler(scrollEvent) {
   if (container.getBoundingClientRect().top 
         < nav.getBoundingClientRect().bottom) {
      // Überlappung
   }
}

document.addEventListener("scroll", scrollHandler.throttle(100));

Es gibt auch fertige Throttler in anderen Bibliotheken, z.B. lodash oder underscore. Wenn Du die eh drin hast, dann guck dort.

Rolf