Gunnar Bittersmann: OnePager mit skip-to-top-Link

Beitrag lesen

@@Rolf B

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

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

Nein.

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

Auch dafür brauchst du kein if-else-Konstrukt.

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

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.

Nur um eine:

[hidden] { display: none !important }

Deshalb kann es noch sinnvoller sein, eine eigene Klasse vorzusehen

Womit sich das wohl erledigt hat.

Kwakoni Yiquan

--
Ad astra per aspera