Stickybits: eine Alternative zu `position: sticky` Polyfills

Stickybits ist ein kleines JavaScript-Utility-Plugin. Sein Ziel ist es, nicht im Weg zu sein. Es macht eine Sache gut: Es hilft bei Sticky-Elementen. Es ist nicht von anderen JavaScript-Plugins abhängig, kann über npm importiert werden und nähert sich Sticky-Elementen auf eine sehr utility-orientierte Weise.

Das Problem mit Sticky-Elementen lösen kann zu sticky Situationen führen

Beim Navigieren auf Websites ist es üblich, HTML-Elemente wie Banner und Navigationen zu sehen, die am oberen und unteren Rand des Browsers haften. Dies kann auf verschiedene Arten geschehen.

Erstens gibt es position: sticky, ein natives CSS-Feature. Man könnte es so verwenden:

header {
  position: sticky;
  top: -1px;
}

MDN erklärt es gut

Sticky-Positionierung ist eine Hybridform aus relativer und fester Positionierung. Das Element wird als relativ positioniert behandelt, bis es einen bestimmten Schwellenwert überschreitet, an dem es als fest positioniert behandelt wird.

Zweitens kann man dieses Verhalten im Wesentlichen mit JavaScript nachahmen. Man misst Scroll-Positionen und schaltet das Element bei Bedarf zwischen position: relative (oder static oder etwas anderem) und position: fixed um.

Ich würde sagen, dass keine dieser Techniken ideal ist.

Durch das eigene Hin- und Herschalten kann es zu Sprüngen kommen, wenn diese Elemente von einer festen Position zu keiner wechseln. Dieses Problem verschlimmert sich auf mobilen Geräten.

Mit nativem CSS allein hat man nicht die Möglichkeit zu wissen, wann sich das Element in einem Zustand oder dem anderen befindet.

Holen Sie das Beste aus beiden Welten mit StickyBits heraus

Stickybits ist eine leichte (~2KB) Alternative zu position: sticky Polyfills. Es ist ein einfach einzurichtendes Plugin, das mit allen anderen Plugins, Bibliotheken oder Frameworks kompatibel ist.

Installation mit npm

npm i stickybits --save-dev

Oder Installation mit Yarn

yarn add stickybits --dev

Verwendung

stickybits('[your-sticky-selector]');

Mit der obigen Out-of-the-Box-Lösung können Sie nun jedes Element mit Ihrem Selektor zu einem Sticky-Element machen. Dies funktioniert für Browser, die .classList unterstützen, unabhängig davon, ob position: sticky unterstützt wird oder nicht.

Stickybits fügt mit der zusätzlichen Eigenschaft useStickyClasses: true die Klassen sticky und stuck hinzu, wenn Elemente sticky oder stuck werden. Dies erleichtert das Anbinden von CSS-Stilen basierend darauf, wann das ausgewählte Element statisch, sticky oder stuck wird. Dieses nützliche Tool wurde hinzugefügt, nachdem Dave Rupert es im Shop Talk Show Podcast erwähnte.

Stickybits bietet auch Offset-Eigenschaften und einen Cleanup-Methoden-Hook, um den Sticky-Status besser zu verwalten.

Demos

Siehe den Pen Njwpep von Jeff Wainwright (@yowainwright) auf CodePen.

Siehe den Pen CSS `position: sticky` Beispiel von Jeff Wainwright (@yowainwright) auf CodePen.

Weitere Demos finden Sie auf GitHub.

Fazit

Stickybits ist ein JavaScript-Plugin, um ein HTML-Element am oberen oder unteren Rand eines Browserfensters innerhalb seines Elternelements zu befestigen. Mit den unterschiedlichen Implementierungen von position: fixed; und position: sticky; in verschiedenen Browsern ist die Erstellung hochwertiger Sticky-Features eine Herausforderung. Stickybits löst dies.

Stickybits wurde von FixedSticky von Fillament Group inspiriert, die ihr Plugin kürzlich degradiert haben.

Es wird von Dollar Shave Club Open Source zur Verfügung gestellt und von unserem Team und mir gepflegt.