OnePager mit skip-to-top-Link

[Matthias Scharwies]

Servus!

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.

Danke für die Änderungen in der Referenz!

Es gibt als Rudiment der Eigenschaftsseiten noch:

• CSS/Tutorials/visibility
• CSS/Tutorials/opacity

Hier im display-Tutorial findet sich eher versteckt eine Abgrenzung:

CSS/Tutorials/Ausrichtung/display#Abgrenzung_zum_hidden-Attribut

Sollte man das in ein eigenes Kapitel/Tutorial packen?

Titel: Elemente verstecken – display: none oder hidden?

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);

Das könnte dann auch da rein.

Herzliche Grüße

Matthias Scharwies