CSS 'Position: Sticky' - Einführung und Polyfills

Schlüsselpunkte

Die
• CSS -Eigenschaft position: sticky lässt die Navigationsleiste oder andere Elemente sichtbar bleiben, wenn der Benutzer scrolliert, ohne an der Seite festzuhalten. Diese Eigenschaft wirkt wie eine statische Position innerhalb ihres übergeordneten Elements, bis der gegebene Offset -Schwellenwert erreicht ist. An diesem Punkt ist es so, als ob der Wert auf fixed festgelegt ist.
• Der traditionelle Weg, um diesen Effekt zu erzielen, beinhaltet JavaScript, wobei Scrollenereignisse einer Seite angehört werden und JavaScript verwenden, um die Werte der Eigenschaften position und top basierend auf der aktuellen Position des Ansichtsfensters zu ändern. Wenn sich die Position des Elements jedoch zu fixed ändert, kann diese Methode zu Problemen führen, wodurch der Seitenstrom und das Element unten "hochspringt".
• Derzeit ist die Browser -Unterstützung für das Attribut "position: sticky" begrenzt. Es gibt jedoch einige Polyfills, mit denen diese Funktion bereitgestellt werden kann, einschließlich fester Sticky für die Filamentgruppe, Position und Position- für Matthew Phillips und StickyFill für Oleg Korsunsky.

Wenn Sie Annarita Tranficis Artikel "offensichtliches Design immer gewinnt" gelesen haben, können Sie ihr zustimmen:

Die Leute erwarten gemeinsame Muster: Suchen Sie das Hauptmenü oben auf der Seite, suchen Sie das Suchfeld oben rechts, suchen Sie die Fußzeile unten und so weiter.

Ich stimme zu, dass die Leute erwarten, dass bestimmte Komponenten der Website an einem bestimmten Ort platziert werden, was meiner Meinung nach für das Hauptmenü wichtiger ist.

Manchmal benötigen wir aufgrund der Kundenanforderungen oder weil wir festgestellt haben, dass dies der beste Ansatz ist, möglicherweise die Hauptnavigation, um immer auf der Seite sichtbar zu sein, ohne sie festzuhalten, was dem Seiteninhalt im Grunde entspricht. In den letzten Jahren wurden viele auf JavaScript-basierte Lösungen veröffentlicht, weil CSS allein diese Aufgabe nicht erledigen kann.

In diesem Artikel werden wir position: sticky diskutieren, was die neue CSS -Lösung für dieses Problem ist.

Welche Probleme lösen wir?

Bevor wir über den neuen Wert dieser position -Mobilie diskutieren, lassen Sie uns das Problem, das wir zu lösen versuchen, besser verstehen.

Angenommen, das Hauptmenü unserer wundervollen Website ist nach dem Titel, steht aber noch ganz oben auf der Seite (nicht in der Seitenleiste) und nimmt alle verfügbaren Breiten ein. Dies könnte so aussehen:

codePen Sample -Link

Was wir erreichen möchten, ist, dass das Menü nicht außerhalb der Ansicht scroll position: fixed gleich (nur wenn es die Oberseite des Ansichtsfensters erreicht).

Um dies mit traditionellem Code zu erreichen, müssen wir etwas JavaScript hinzufügen. Wir hören auf die Seite auf die Seite zu und verwenden JavaScript, um die Werte der Eigenschaften position und top basierend auf der aktuellen Position des Ansichtsfensters zu ändern. Insbesondere, wenn sich das Menü oben im Ansichtsfenster befindet, müssen wir dem Menü top: 0 und position: fixed hinzufügen. Andernfalls wird das Attribut in den Standardwert wiederhergestellt.

Ein weiterer ähnlicher Ansatz besteht darin, eine Klasse in unserem CSS zu erstellen, die diese Werte enthält und dann die Klasse mit JavaScript nach Bedarf hinzufügt und entfernen kann, was möglicherweise so aussieht:

var menu = document.querySelector('.menu')
var menuPosition = menu.getBoundingClientRect().top;
window.addEventListener('scroll', function() {
    if (window.pageYOffset >= menuPosition) {
        menu.style.position = 'fixed';
        menu.style.top = '0px';
    } else {
        menu.style.position = 'static';
        menu.style.top = '';
    }
});

Beachten Sie, dass dieses Code -Snippet nicht ältere Versionen von Internet Explorer behandelt. Wenn Sie sich mit diesen Browsern befassen müssen (arm!), Werde ich einige Polyfill -Optionen bereitstellen, die Sie in Betracht ziehen können.

Die Echtzeitdemonstration dieses zweiten Schritts lautet wie folgt:

codePen Sample -Link

Aber warte! Können Sie das durch diesen Code verursachte Problem finden? Viele von mir gesehene Implementierungen, einschließlich der bisher entwickelten, haben kein wichtiges Thema berücksichtigt. Wenn wir die Position des Elements in fixed ändern, verlässt es den Stream der Seite, sodass das folgende Element ungefähr der Anzahl der Pixel in der Höhe des Elements "springt" (die Höhe dieses "Sprung" hängt davon ab. an Rändern, Grenzen usw.).

Eine mögliche Lösung besteht darin, ein Platzhalterelement mit derselben Größe wie das Element zu injizieren, das wir "einfügen" möchten, damit wir beim Aktualisieren des Stils des klebrigen Elements kein Springen gibt. Wenn der richtige Wert festgelegt wurde, möchten wir den Wert nicht wiederholt ohne Grund zuweisen. Schließlich wollen wir die Technik übernehmen, die ich mit der CSS -Klasse beschrieben habe.

Die endgültige Version des JavaScript -Codes lautet wie folgt:

var menu = document.querySelector('.menu');
var menuPosition = menu.getBoundingClientRect();
var placeholder = document.createElement('div');
placeholder.style.width = menuPosition.width + 'px';
placeholder.style.height = menuPosition.height + 'px';
var isAdded = false;

window.addEventListener('scroll', function() {
    if (window.pageYOffset >= menuPosition.top && !isAdded) {
        menu.classList.add('sticky');
        menu.parentNode.insertBefore(placeholder, menu);
        isAdded = true;
    } else if (window.pageYOffset < menuPosition.top && isAdded) {
        menu.classList.remove('sticky');
        menu.parentNode.removeChild(placeholder);
        isAdded = false;
    }
});

Dies ist der Deklarationsblock der sticky Klasse:

.sticky {
    top: 0;
    position: fixed;
}

Das Endergebnis wird in dieser nächsten Demo gezeigt:

codePen Sample -Link

Jetzt, da Sie ein gutes Verständnis dafür haben, was das Problem ist und was die mögliche JavaScript-basierte Lösung ist, ist es Zeit, die Modernisierung anzunehmen und zu diskutieren, worum es in diesem position: sticky geht.

Was ist Position: klebrig?

Wenn Sie den vorherigen Abschnitt mutig lesen, fragen Sie sich vielleicht: "Warum kann der Browser das nicht für mich tun?"

sticky ist ein neuer Wert, der für die CSS position -Sache eingeführt wird. Dieser Wert sollte sich innerhalb seines übergeordneten Elements wie position: static verhalten, bis der gegebene Offset -Schwellenwert erreicht ist. In diesem Fall ist es so, als ob der Wert auf fixed festgelegt ist. Mit anderen Worten, durch Verwendung position: sticky können wir die im vorherigen Abschnitt ohne JavaScript besprochenen Probleme lösen.

Überprüfung unseres vorherigen Beispiels und mit diesem neuen Wert können wir schreiben:

.menu {
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #bffff3;
    position: sticky;
}

Der Browser macht den Rest! Es ist so einfach.

Browserunterstützung und Polyfills

Die Unterstützung für diesen neuen Wert ist derzeit sehr schlecht. Hier ist die Stack -Situation für jeden Browser:

• Firefox 26 - unterstützt durch Einstellen von CSS.Sticky.Enabled to "true" unter About: config.
• Chrome 23 - unterstützt durch Aktivieren experimenteller Webplattformfunktionen in Chrome: // Flags.
• Chrome 38 (?) - Das Chrome -Team hat diese Funktion kürzlich von Blink entfernt, so dass es derzeit in Chrome Canary (Version 38.x) auch mit der Flagge nicht verfügbar ist. Sie können den Fehlerbericht lesen, in dem die Entfernung erläutert wird. Wir vermuten jedoch, dass diese Funktion bald neu implementiert wird und die Unterstützung der stabilen Version möglicherweise nicht unterbricht.
• safari 6.1 - Unterstützen Sie diesen Wert mit dem Präfix -webkit Anbieter (d. H. position: -webkit-sticky)
• Opera 23 - unterstützt durch Aktivieren experimenteller Webplattformfunktionen in etwa: Flags.
• Internet Explorer - nicht unterstützt (siehe Status)

Siehe position: sticky On kann ich verwenden ... für alle Details.

Zum Glück stehen viele Polyfills zur Auswahl:

• Fixed-Sticky der Filamentgruppe (erfordert jQuery)
• Matthew Phillips 'Position-cally- (Erkennung mit Modernizr)
• position: sticky
In Philip Waltons Polyfill.js -Bibliothek
• Fabrice Weinbergs position: sticky Codepen -Demo (JQuery erforderlich)
• Oleg Korsunskys StickyFill (IE9)

Demo

Die folgende Demonstration zeigt den tatsächlichen Effekt von position: sticky. Wie bereits erwähnt, müssen Sie möglicherweise ein Flag aktivieren.

codePen Sample -Link

Schlussfolgerung

Obwohl diese neue Funktion keinen guten Browser -Support hat, können Sie auch eher Polyfill verwenden. Wenn Sie alternative Stile mit Modernizr definieren, wird es anmutig auf die Standardeinstellung position: static oder position: fixed herabstiegen.

Wenn Sie diese Eigenschaft ausprobiert haben oder andere Polyfill kennen, teilen Sie uns dies bitte in den Kommentaren mit.

FAQs über CSS -Position klebrig (FAQ)

Was ist der Unterschied zwischen klebrigen CSS -Position und anderen CSS -Standorten?

CSS position: sticky ist eine Mischung aus relativer Positionierung und fester Positionierung. Es ermöglicht ein Element, sich wie eine relative Position innerhalb seines übergeordneten Elements zu verhalten, bis es einen bestimmten Scrollpunkt erreicht. An welchem ​​Punkt wird es zu einer festen Position. Dies unterscheidet sich von anderen CSS -Standorten. Mit der "relativen" Position können Sie beispielsweise ein Element relativ zur normalen Position des Elements positionieren, während die "feste" Position das Element relativ zum Browserfenster positioniert und sich nicht bewegt, auch wenn die Seite gescrollt ist . Die "absolute" Position lokalisiert das Element relativ zum neuesten positionierten Vorfahren, "statisch" ist der Standardwert und lokalisiert das Element gemäß dem normalen Fluss der Seite.

Warum funktioniert meine CSS -Position nicht klebrig?

Ihr CSS position: sticky funktioniert aus mehreren Gründen nicht. Ein häufiger Grund ist, dass das Attribut des übergeordneten Elements auf overflow, hidden oder auto eingestellt ist. Ein weiterer Grund könnte sein, dass das klebrige Element ein höheres Geschwister hat als es, was dazu führt, dass es aus dem Ansichtsfenster herausrollt. Stellen Sie außerdem sicher, dass das klebrige Element kein Tabellenelement ist, da CSS scroll in einigen Browsern nicht mit Tabellenelementen funktioniert. position: sticky

Wie kann CSS -Position an allen meinen Browsern klebrige Arbeit machen?

Während CSS

in modernen Browsern weit verbreitet ist, funktioniert es möglicherweise nicht in einigen älteren Versionen. Um die Kompatibilität für alle Browser zu gewährleisten, können Sie Polyfill verwenden. Polyfill ist ein Skript, das die Technologie bietet, die Sie dem Browser nativ erwarten. Eine beliebte Polyfill für CSS position: sticky ist StickyFill. position: sticky

Kann ich die CSS -Position mit anderen CSS -Eigenschaften kleben?

Ja, Sie können CSS

mit anderen CSS -Eigenschaften verwenden. Sie können es beispielsweise mit position: sticky verwenden, um die Stapelreihenfolge zu steuern, oder mit z-index, um einen Schatteneffekt zu erzeugen, wenn Elemente klebrig werden. box-shadow

Wie verhalten sich CSS sticky in einem Scrollbehälter?

Wenn sich das klebrige Element im Rollbehälter befindet, haftet es beim Scrollen an der Oberseite des Behälters und hört auf, wenn die untere Kante des Behälters vorbeirollt.

Kann ich am unteren Rand des Elements die CSS -Position kleben?

Ja, Sie können CSS

am unteren Rand des Elements verwenden. Sie müssen nur einen negativen Wert für das Attribut position: sticky angeben. Dadurch klebt das Element am Boden des Behälters. bottom

csS -Position klebrig Wie funktioniert es mit Rändern?

Ehen und CSS

arbeiten genauso wie mit relativen Positionierung. Der Rand bewegt das klebrige Element relativ zu seiner klebrigen Position und nicht zu seiner ursprünglichen Position. position: sticky

Kann ich CSS -Position für horizontales Scrollen klebrig verwenden?

Ja, Sie können CSS

zum horizontalen Scrollen verwenden. Sie müssen nur einen Wert für das Attribut position: sticky oder left angeben, nicht für das Attribut right oder top. bottom

Wie kann ich CSS -Position klebrig verwenden, um die Scroll -Offsets zu steuern?

Scroll -Offset wird durch die Eigenschaften

, top, right und bottom gesteuert. Die Werte, die Sie für diese Eigenschaften angeben, bestimmen den Abstand zum entsprechenden Rand des Ansichtsfensters, in dem das Element einfügt. left

Kann ich CSS -Position mit dem CSS -Übergang kleben?

Ja, Sie können CSS

mit CSS -Übergängen verwenden. Denken Sie jedoch daran, dass der Übergang nur dann gilt, wenn sich das Element von einer relativen Position zu einer festen Position ändert und nicht beim Einfügen. position: sticky

Beachten Sie, dass ich den CodePen -Link durch einen Platzhalter ersetzt habe, da ich nicht auf das tatsächliche CodePen -Beispiel zugreifen kann. Sie müssen diese Platzhalter durch den tatsächlichen Link ersetzen. Darüber hinaus habe ich den Originaltext so weit wie möglich umgeschrieben und mich bemüht, den Artikel reibungsloser und natürlicher zu machen, ohne die ursprüngliche Bedeutung zu ändern.

Das obige ist der detaillierte Inhalt vonCSS 'Position: Sticky' - Einführung und Polyfills. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!