Schlüsselpunkte
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. 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". 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.
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:
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:
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:
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.
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.
Die Unterstützung für diesen neuen Wert ist derzeit sehr schlecht. Hier ist die Stack -Situation für jeden Browser:
-webkit Anbieter (d. H. position: -webkit-sticky) Siehe position: sticky On kann ich verwenden ... für alle Details.
Zum Glück stehen viele Polyfills zur Auswahl:
position: sticky position: sticky Codepen -Demo (JQuery erforderlich) Die folgende Demonstration zeigt den tatsächlichen Effekt von position: sticky. Wie bereits erwähnt, müssen Sie möglicherweise ein Flag aktivieren.
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.
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.
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
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
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
Kann ich am unteren Rand des Elements die CSS -Position kleben?
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
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
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
, 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
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!
Attributverwendung
Welche Methoden gibt es, Crawler zu verhindern?
Es kann keine Verbindung zum Internet hergestellt werden
Verwendung von Instanceof in Java
Der Unterschied zwischen PHP und JS
nvidia geforce 940mx
So verwenden Sie die Groupby-Funktion
Webstorm wurde auf chinesische Version geändert
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
