Detaillierte Erklärung des Sticky Position-Attributs in CSS

Beim Entwickeln mobiler Apps stoßen Sie häufig auf eine Situation, in der Sie einen Teil des Inhalts als Navigationsleiste anzeigen müssen, wenn die Website bis zu einer bestimmten Höhe gescrollt wird. Normalerweise verwenden wir js, um das Scroll-Ereignis abzuhören, um dies zu erreichen, aber das neu hinzugefügte CSS-Attribut position:sticky lässt sich problemlos erreichen.

Ich bin nicht der Letzte, der es erfährt: Position: klebrig

Die Bedeutung von Position bezieht sich auf den Positionierungstyp. Die möglichen Werttypen sind: statisch, relativ, absolut, fest, geerbt und klebrig. Hier ist Sticky ein neu veröffentlichtes Attribut von CSS3. Worauf ich mich heute konzentrieren möchte, ist das Sticky-Attribut

Verwendung von Position: sticky

• position:sticky wird als klebrig positioniertes Element bezeichnet, also ein Element, dessen berechnetes Positionsattribut klebrig ist.
• Das einfache Verständnis ist: Innerhalb des Zielbereichs verhält es sich wie position:relative; während des Gleitvorgangs, wenn der Abstand zwischen einem Element und seinem übergeordneten Element die Anforderung einer klebrigen Positionierung erreicht (z. B. oben: 100 Pixel); der Effekt von position:sticky zu diesem Zeitpunkt entspricht einer festen Positionierung und wird an der entsprechenden Position fixiert.
• Man kann es als eine Kombination aus relativer Positionierung und fester Positionierung bezeichnen.
• Der feste relative Versatz eines Elements ist relativ zu seinem nächsten Vorgängerelement mit einem Bildlauffeld. Wenn keines der Vorgängerelemente gescrollt werden kann, wird der Versatz des Elements relativ zum Ansichtsfenster berechnet.

Bedingungen für die Verwendung von position:sticky

1. Das übergeordnete Element darf keine overflow:hidden- oder overflow:auto-Attribute haben. 2. Einer der Werte oben, unten, links und rechts muss angegeben werden, sonst erfolgt nur eine relative Positionierung. 3. Die Höhe des übergeordneten Elements kann nicht niedriger sein als die Höhe des klebrigen Elements. 4. Das klebrige Element ist nur innerhalb seines übergeordneten Elements wirksam.

Beispiel

Wenn die Maus bis zu einer bestimmten Höhe nach unten gleitet, wird die Positionierungsanforderung „position:sticky“ ausgelöst, sodass „Beliebt, Neu, Empfohlen“ auf 44 Pixel vom oberen Rand fixiert wird.

CSS Code

.tab-control{
  Position: klebrig;
  oben: 44px;
}

HTML-Bereich

<tab-control class="tab-control" :titles="['Beliebt','Neu','Hervorgehoben']"></tab-control>

Achten Sie bei der Webentwicklung auf Kompatibilität:

Sticky ist noch ein experimentelles Attribut und kein vom W3C empfohlener Standard. Dies liegt daran, dass das Abhören von Bildlaufereignissen zum Implementieren des Sticky Layouts den Browser in den langsamen Bildlaufmodus versetzt, was dem Wunsch des Browsers, das Bildlauferlebnis durch Hardwarebeschleunigung zu verbessern, zuwiderläuft. Einzelheiten finden Sie in der folgenden Abbildung. Grundsätzlich sind die einzigen Browser, die diese Eigenschaft verwenden, Firefox und iOS Safari.

Zusammenfassen

Dies ist das Ende dieses Artikels mit der detaillierten Erklärung des Sticky-Position-Attributs in CSS. Weitere relevante Inhalte zum Sticky-Position-Attribut in CSS finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!