Klebrige Positionierung mit nichts außer CSS

Das Aufkleben von Elementen, wenn der Benutzer zu einem bestimmten Punkt blättert, ist zu einem gängigen Muster im modernen Webdesign geworden. Sie werden sehen, dass sie auf die obere Navigation, die Seitenleiste, die Freigabe von Links oder möglicherweise auf Werbung angewendet wird. Beibehalten der Sichtbarkeit innerhalb des Ansichtsfensters, wenn der Benutzer blättert. 

In der Vergangenheit haben wir dazu JavaScript benötigt. Allerdings wurde klebriges Verhalten als neuer Standard vorgeschlagen (und entworfen) klebrig Position), um den Effekt mit reinem CSS zu erreichen. Lassen Sie uns einen Blick darauf werfen, wie es funktioniert!

Klebrige Position

klebrig ist ein neuer Wert für die Position Diese Eigenschaft wurde als Teil der CSS3-Layoutmodulspezifikation hinzugefügt. Es verhält sich ähnlich wie relativ Positionieren, da dadurch nichts aus dem Dokumentenfluss entfernt wird. Mit anderen Worten, ein Sticky-Element hat keine Auswirkungen auf die Position benachbarter Elemente und bricht das übergeordnete Element nicht zusammen.

Im folgenden Beispiel setzen wir die #Sidebar Position zu klebrig zusammen mit oben: 10px. Der obere Wert ist erforderlich und gibt den Abstand vom oberen Rand des Ansichtsfensters an, in dem sich das Element befindet Stock. 

#sidebar position: -webkit-sticky; // für Safari-Position erforderlich: sticky; oben: 0; // auch erforderlich.  

Beim Scrollen der Seite wird nun der Abstand der Seitenleiste vom oberen Rand des Ansichtsfensters erreicht 0, Die Seitenleiste sollte kleben, so dass wir effektiv eine Fest Position. Mit anderen Worten, die klebrig ist eine Art Hybrid zwischen relativ und FestPosition.

Verschachtelung

Zusätzlich die klebrig Die Position funktioniert innerhalb eines Bildlauffelds oder eines überlaufenden Elements. Dieses Mal setzen wir die oben zu 15px um mehr Platz über der Seitenleiste zu geben, wenn es ist klebrig positioniert (ja, das ist ein Wort).

Die Seitenleiste bleibt über die gesamte Höhe des übergeordneten Elements klebrig (dh: Wenn der untere Rand des übergeordneten Elements den unteren Rand der Seitenleiste erreicht, wird er erneut von der Seite "verschoben").

Leicht ist es nicht?

Unterstützung

Wenn Sie diese Demos in Chrome, Opera oder Internet Explorer (und Blink) anzeigen, haben Sie inzwischen erkannt, dass sie nicht funktionieren. Diese Browser unterstützen das noch nicht klebrig Wert.

Unterstützung für CSS-Sticky-Position-Browser

Als in Chrome 28 auf Blink Engine umgestellt wurde, entschied sich Chrome, die klebrig Position von seiner Code-Basis, und sogar die Option entfernt, um es durch die Chrom: // Flaggen Seite. Der Grund ist:

„Die derzeitige Implementierung von position sticky in Blink lässt sich nicht richtig in Compositing oder Scrolling integrieren. Wir möchten letztendlich die Position sticky implementieren, aber die aktuelle Implementierung bietet die Möglichkeit, Scrollen und Compositing zu verbessern. Sobald Scrollen und Zusammensetzen in einem besseren Zustand sind, können wir die Position sticky wieder auf eine Weise einführen, die sich korrekt in den Rest des Systems einfügt.

Einmal Alternative ist ein Antrag zu stellen Polyfill um den Effekt in nicht unterstützenden Browsern zu simulieren.

Verwenden der Polyfill

Um unseren nicht unterstützenden Browsern zu helfen, verwenden wir stickyfill, entwickelt von Oleg Korsunsky. Der Polyfill funktioniert unter verschiedenen Umständen gut. Gibt an, ob das designierte Element Füllungen, Ränder, Ränder hat, verschoben wurde oder mit relativen Einheiten wie gebildet wurde em und Prozentsatz, die Polyfill wird das CSS genau nachahmen klebrig Positionsverhalten. Die Verwendung von stickyfill ist ebenso intuitiv.

Zu Beginn greifen Sie auf stickyfill.js (optional mit jQuery, wenn Sie mit jQuery besser vertraut sind und die Auswahl von Elementen bevorzugen). Verknüpfen Sie diese Bibliotheken in Ihrem HTML-Dokument. Dann initiiere stickyfill mit dem angegebenen Element wie folgt:

var sidebar = document.getElementById ('sidebar'); Stickyfill.add (Seitenleiste); 

Wenn Sie jQuery verwenden, können Sie stattdessen Folgendes schreiben:

$ ('# sidebar'). Stickyfill (); 

Nun sollte unsere klebrige Seitenleiste in allen Browsern funktionieren, einschließlich Chrome und Opera. Polyfill ist so intelligent, dass es nur in nicht unterstützenden Browsern ausgeführt werden kann. Andernfalls wird es vollständig deaktiviert und bleibt für die native Implementierung des Browsers unberücksichtigt.

Vorsichtsmaßnahmen

Es gibt noch ein paar andere Dinge, die Sie beachten sollten, bevor Sie den Sprung machen und verwenden klebrig Position auf Ihren Websites:

• Erstens sollte die Höhe des übergeordneten Containers größer sein als das klebrige Element.
• Safari unterstützt zwar nativ die CSS-Sticky-Position (allerdings mit Präfix), wird jedoch nicht wirksam, wenn die Sticky-Position unter einem Element mit CSS verwendet wird Anzeige: Tisch;. Das ist ein Fehler.
• Der Polyfill hat seine eigenen Nachteile, da er nicht in einer überlaufenden Box funktioniert.
• Zum Zeitpunkt des Schreibens gibt es keinen JavaScript-Ereignishandler, mit dem Sticky erkennen kann, wann sich das Element befindet stecken. So ein Veranstaltung könnte zum Beispiel nützlich sein, um zusätzliche Klassen hinzuzufügen, wenn das Element verklebt ist (dies kann kein Wort sein).

Schlussgedanken

CSS-Sticky-Position könnte ein brillantes Werkzeug sein, wenn Sie einfach ein einfaches Sticky-Element benötigen. Wenn Ihr Bedürfnis darüber hinaus wächst - sagen Sie, Sie möchten dem Sticky-Element ein paar ausgefallene Effekte hinzufügen -, sollten Sie trotzdem lieber eine JavaScript-Bibliothek wie Waypoints.js mit seinem Sticky-Modul wählen.

Wir hoffen jedoch, dass wir in Kürze einige wichtige Verbesserungen bei CSS Sticky in Bezug auf seine Funktionalität sowie die Browserunterstützung sehen werden.

Weitere Referenzen

• Warum (klebrig) JS nicht ideal ist?
• CSS Sticky-Arbeitsentwurf
• Schneller Tipp: Sticky Navigation, ohne den unbeholfenen Sprung von Adi Purdila

Lernen Sie CSS: Das komplette Handbuch

Wir haben ein umfassendes Handbuch erstellt, mit dessen Hilfe Sie CSS erlernen können, egal ob Sie gerade erst mit den Grundlagen beginnen oder etwas weiter fortgeschrittenes CSS erkunden möchten.