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!