Jetzt landen! Position – fixierte Elemente in WebKit

Eric Bidelman

Twitter GitHub Startseite

position: sticky bietet eine neue Möglichkeit, Elemente zu positionieren, und ähnelt dem Konzept position: fixed. Der Unterschied besteht darin, dass sich ein Element mit position: sticky wie position: relative innerhalb seines übergeordneten Elements verhält, bis im Darstellungsbereich ein bestimmter Offset-Grenzwert erreicht ist.

Anwendungsfälle

Umformulierung des ursprünglichen Angebots von Edward O'Connor zu dieser Funktion:

Hinweis:Viele Websites haben Elemente, die abhängig von der Scrollposition des Nutzers zwischen In-Flow und position: fixed abwechselnd angezeigt werden. Dies wird häufig für Elemente in einer Seitenleiste durchgeführt, die der Autor der Seite immer sichtbar sein möchte, wenn die Nutzenden scrollen, aber in einen Bereich auf der Seite fallen, wenn sie nach oben gescrollt werden. Gute Beispiele sind news.google.com (Seitenleiste „Schlagzeilen“) und yelp.com (Karte mit Suchergebnissen).

Jetzt neu: Fixierte Positionierung

DEMO STARTEN

Indem wir einfach position: sticky (Anbieter-Präfix) hinzufügen, können wir festlegen, dass ein Element den Status position: relative hat, bis der Nutzer durch das Element (oder sein übergeordnetes Element) scrollt, sodass es 15 Pixel vom oberen Rand entfernt ist:

.sticky {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    top: 15px;
}

Ab top: 15px wird das Element fixiert.

Ich habe eine DEMO zusammengestellt, in der Blogtitel beim Scrollen festgehalten werden.

Alte Methode: Scroll-Ereignisse

Bisher wurden scroll-Ereignis-Listener in JS eingerichtet, um einen fixierten Effekt zu erzielen. Wir verwenden diese Technik auch in html5rocks-Anleitungen. Auf Bildschirmen, die kleiner als 1.200 Pixel sind, ändert sich die Seitenleiste für das Inhaltsverzeichnis nach einer gewissen Zeit zum Scrollen zu position: fixed.

So sieht die (jetzt alte) Art aus, dass eine Kopfzeile am oberen Rand des Darstellungsbereichs fixiert wird, wenn der Nutzer nach unten scrollt, und wieder an die Position fällt, wenn er nach oben scrollt:

<div class="header"></div>

<script>
var header = document.querySelector('.header');
var origOffsetY = header.offsetTop;

function onScroll(e) {
    window.scrollY >= origOffsetY ? header.classList.add('sticky') :
                                    header.classList.remove('sticky');
}

document.addEventListener('scroll', onScroll);
</script>

Jetzt ausprobieren: http://output.jsbin.com/omanut/2/

Das ist zwar einfach, aber dieses Modell funktioniert schnell, wenn Sie dies für eine Reihe von DOM-Knoten durchführen möchten, z. B. für jeden <h1>-Titel eines Blogs, wenn der Nutzer scrollt.

Warum JavaScript nicht ideal ist

Im Allgemeinen sind Scroll-Handler keine gute Idee. Folks erledigen in der Regel zu viel Arbeit und fragen sich, warum die Benutzeroberfläche instabil ist.

Außerdem sollten Sie berücksichtigen, dass immer mehr Browser hardwarebeschleunigtes Scrollen implementieren, um die Leistung zu verbessern. Das Problem dabei ist, dass bei der Wiedergabe von JS-Scroll-Handlern der Browser in einen langsameren Modus (Software-Modus) versetzt wird. Jetzt werden wir nicht mehr auf der GPU ausgeführt. Stattdessen nutzen wir wieder die CPU. Das Ergebnis: Nutzer nehmen beim Scrollen auf Ihrer Seite eine größere Verzögerung wahr.

Daher ist es sinnvoll, dass solche Funktionen in CSS deklarativ sind.

Support

Leider gibt es dafür keine Spezifikation. Sie wurde im Juni auf www-style vorgeschlagen und ist jetzt in WebKit gelandet. Das bedeutet, dass es keine gute Dokumentation gibt, auf die Sie verweisen können. Beachten Sie jedoch, dass gemäß diesem Programmfehler left und right angegeben werden, left gewinnt. Wenn top und bottom gleichzeitig verwendet werden, gewinnt top.

Aktuell werden Chrome 23.0.1247.0 oder höher (aktuelle Canary-Version) und WebKit nächtlich unterstützt.