Das Erstellen von Seiteninhalten, die beim Scrollen am Viewport haften, wie z. B. ein Sprungzielmenü oder Abschnittsüberschriften, war noch nie einfacher. Füge eine `position: sticky` zu deinem CSS-Regelsatz hinzu, setze den Richtungs-Offset (z. B. `top: 0`) und ...
Ich stimme David vollkommen zu, dass CSS einen Selektor benötigt, um zu wissen, ob ein position: sticky;-Element seine Sticky-Funktion ausführt oder nicht.
…Idealerweise gäbe es eine
:stuckCSS-Direktive, die wir verwenden könnten, aber stattdessen ist das Beste, was wir tun können
Neulich ist mir auf der Website von Corey Ginnivan etwas besonders Schönes aufgefallen, wo sich eine Sammlung von Karten beim Scrollen übereinander stapelt. …
Sie kennen diese Momente, in denen eine horizontale Scrollleiste erscheint, wenn Sie versehentlich ein Element über den rechten Rand des Browserfensters hinaus platzieren? Es kann sich um ein Menü handeln, das hereinrutscht, oder Ähnliches. Manchmal wenden wir overflow-x: hidden; auf die … an.
Scrolling ist etwas, das wir alle im Web kennen und so selbstverständlich nutzen, dass es eine Erwartungshaltung oder vielleicht sogar eine Gewohnheit ist, wie Zähneputzen. Wahrscheinlich denken wir deshalb nicht allzu sehr über das Design von Scrolling nach...
Mike Solomon hat an einem schicken Scrollytelling-Beitrag für Esquire gearbeitet und darüber gebloggt. Er enthält GIFs von jedem Schritt, um nicht nur position: sticky; zu verstehen, sondern auch negative Abstände, Wrapper-Divs, Hintergründe und ...
Man kann keine position: sticky; auf ein <thead></thead> anwenden. Auch nicht auf eine <tr></tr>. Aber man kann ein <th></th> "sticky" machen, was bedeutet, dass man *doch* Sticky-Header innerhalb einer ganz normalen <table></table> erstellen kann. Das ist knifflig, denn wenn man es nicht wüsste…
Jeder overflow-Wert außer visible und keine Höhe ist der Feind von Kindelementen mit position: sticky;. Es ist, als ob dieses Element bereit wäre, zu haften, wenn das Elternteil scrollt, aber es tut es nie, weil die Höhe unbegrenzt ist. …
Ich mag position: sticky; ziemlich gerne. Es gibt praktische Anwendungsfälle. Ich denke dabei an Dinge wie das Beibehalten eines Inhaltsverzeichnisses in einer Seitenleiste eines langen Artikels, aber als ziemlich einfache Implementierung und ohne das Risiko, dass sich Dinge überschneiden ...
