Hallo Gunnar,

topLink.style.display = !entry.isIntersecting ? 'block' : 'none';
topLink.style.display = entry.isIntersecting ? 'none' : 'block';

nein, weder noch.

Wenn überhaupt über style.display, dann so:

if (entry.isIntersecting)
   topLink.style.display = "none";
else
   topLink.style.removeProperty("display");

womit sich die Frage erübrigt, was der richtige display-Wert für topLink ist, wenn er nicht versteckt wird.

Ich bestreite damit nicht, dass hidden trotzdem eleganter ist. Man muss nur achtgeben, es kann nämlich passieren, dass hidden keinen Effekt hat.

Im Browser-Stylesheet steht

[hidden] { display: none; }

Wenn das auszublendende Element seine display-Eigenschaft über eine CSS-Regel im Autorenstylesheet bekommt (was bei Flexbox oder Grid immer so ist), dann ist diese Regel auf Grund der Kaskade spezifischer und die Browserregel hat keinen Effekt. Man muss sein eigenes Stylesheet dann um passende Regeln erweitern.

Deshalb kann es noch sinnvoller sein, eine eigene Klasse vorzusehen, die den Sachverhalt "wird gerade nicht gebraucht" darstellt und mit geeigneter Spezifität eine CSS Regel aktiviert, die die nötigen Styles zuweist. Diese Klasse kann man dann mittels classList.toggle bedarfsweise aktivieren.

topLink.classList.toggle("out-of-screen", entry.isIntersecting);

Rolf