Position: Sticky in CSS ermöglicht es uns, einige sehr nette Interaktionen in sehr wenigen Codezeilen zu erstellen. Dies ist immer dann nützlich, wenn der Benutzer möchte, dass ein UI-Element beim Scrollen sichtbar bleibt, aber nicht hängen bleibt, bis das Element einen bestimmten Abstand von der oberen/unteren/linken/rechten Seite des Scroll-Ansichtsfensters erreicht.
Wie können wir eine Position festlegen: klebrig?
Position: Sticky ist perfekt für Listenüberschriften im iOS-Stil. Scrollen Sie durch den Inhalt und sehen Sie sich den Titel an, nachdem er vom oberen Rand 0 Pixel erreicht hat.
.heading{
background: #ccc;
height: 50px;
line-height: 50px;
margin-top: 10px;
font-size: 30px;
padding-left: 10px;
position: -webkit-sticky;
position: sticky;
top: 0px;
}Sie möchten, dass der Listentitel sichtbar bleibt, wenn der Benutzer nach unten scrollt. Wenn Sie nach oben scrollen, soll auch die Fußzeile „Element hinzufügen“ sichtbar sein. Probieren Sie es aus! Scrollen Sie nach oben und unten und beobachten Sie, wie die Elemente haften bleiben, nachdem sie den Rand des Ansichtsfensters erreicht haben:
header{
background: #ccc;
font-size: 20px;
color: #282a37;
padding: 10px;
position: -webkit-sticky;
position: sticky;
top: 0;
}
footer{
background: #ccc;
padding: 10px;
color: #ae81fe;
position: relative;
position: -webkit-sticky;
position: sticky;
}
footer{
bottom: 0;
}
list{
border: 1px solid #ccc;
border-radius: 5px;
width: 200px;
margin-left: 20px;
background: #282a37;
}
item{
padding: 10px;
color: #fff;
display: block;
}
body{
padding-top: 20px;
display: flex;
align-items: flex-start;
}
.abs{
position: absolute;
right: 0;
top: 10px;
}Sie können Elemente auch am linken oder rechten Rand kleben. Dies ist ein seitlicher Bildbetrachter mit einer gedrehten Textbeschreibung des Bildes. Scrollen Sie seitwärts und beobachten Sie, wie die Beschreibung links im Blickfeld angedockt wird, bis eine neue Beschreibung sie beiseite schiebt.
div[description]{
max-width: 40px;
height: 300px;
position: -webkit-sticky;
position: sticky;
left: 0; /* become sticky once touching left edge */
}
sidescroller{
display: flex;
align-items: center;
overflow-x: auto;
overflow-y: hidden;
background: #000;
}
div[wrapper]{
flex: 0 0 40px;
max-width: 40px;
height: 300px;
position: -webkit-sticky;
position: sticky;
left: 0;
white-space: nowrap;
color: #fff;
}
div[item]{
display: flex;
}
div[description] span{
display: inline-block;
background: rgba(0,0,0,.5);
width: 300px;
height: 40px;
transform: rotate(-90deg) translateX(-300px);
transform-origin: left top 0;
padding-top: 11px;
text-align: center;
text-transform: uppercase;
color: #fff;
font-size: 14px;
}
img{
max-height: 300px;
}Sie können sogar eine negative Zahl angeben, wenn ein Element hängenbleibt, wenn ein Teil oder alles davon aus dem Blickfeld gescrollt wird! Dies kann nützlich sein, wenn beispielsweise das Seitenleistenmenü beim Scrollen aus der Ansicht eingeklemmt wird und eine kleine Schaltfläche übrig bleibt, die beim Klicken zurück zur Seitenleiste springt:
.sidebar{
background: purple;
width: 200px;
height: 300px;
padding: 20px;
flex-shrink: 0;
overflow: visible;
position: -webkit-sticky;
position: sticky;
left: -200px;
}
.sidebar .handle{
height: 30px;
width: 30px;
position: absolute;
right: -30px;
top: 0;
background: purple;
color: #fff;
font-weight: bold;
font-size: 20px;
padding-left: 8px;
cursor: pointer;
}
p{
padding: 20px;
}
.site{
display: flex;
}Die Verwendung von Position: Einklebefunktion ist sehr einfach .
1. Deklarieren Sie das Element als „sticky position:sticky“ (plus alle erforderlichen Browser-Präfixpositionen: -webkit-sticky)
2 Geben Sie die Seite des Elements an, das „geklebt“ werden soll (oben). |Rechts|Unten|Links).
3. Geben Sie den Abstand vom Rand ein, bei Erreichen wird die Klebrigkeit aktiviert.
Nehmen wir zum Beispiel an, Sie möchten, dass der Titel eingeklebt wird, wenn er 20 Pixel vom oberen Rand des Bildlaufbereichs entfernt ist:
.header{
position: -webkit-sticky;
position: sticky;
top: 20px;
}Oder scrollen Sie aus dem Sichtfeld zum linken Rand des Menüs, wie in das obige Beispiel:
.menu{
width: 200px;
position: -webkit-sticky;
position: sticky;
left: -200px;
}Hinweise zur Position: klebrig
Geschwisterelemente
Wenn gleichrangige (benachbarte) Elemente auf Position eingestellt sind: Sticky, sie verhalten sich etwas anders als Elemente in verschachtelten Elementen. Sticky-Geschwisterelemente werden für neue Elemente nicht verschoben. Stattdessen überlappen sie sich an Ort und Stelle:
Manchmal möchten Sie dieses Verhalten vielleicht, aber wenn Sie eine Hintergrundfarbe festlegen, sieht der Benutzer sonst, dass alle Projekte in dasselbe gepackt sind Auf einmal ist der Raum klein und es sieht aus wie ein Durcheinander.
Wenn Sie andererseits ein Sticky-Element in einem übergeordneten Element verschachteln, wie wir es im SsiDelLoad-Beispiel getan haben, beginnt sich das Sticky-Element zu bewegen, sobald ein anderes Sticky-Element es berührt, was a ist gute Praxis und funktioniert ein bisschen wie IMO:
Überlauf (Überlauf)
Verwenden Sie keinen Überlauf: auto |scroll| versteckt auf dem übergeordneten Element eines position:sticky-Elements, wodurch die Klebrigkeit vollständig aufgehoben wird, overflow:visible jedoch schon.
Absolute Positionierung (position:absolute)
Wenn Sie das Element position:absolute innerhalb eines Sticky-Elements verwenden möchten, müssen Sie vorsichtig sein. Wenn Ihre Anwendung in einem älteren Browser ausgeführt wird, der position:sticky nicht unterstützt, verhält sich das Sticky-Element nicht wie ein relativ positioniertes Element. Ein absolut positioniertes Element überspringt es also und sucht im DOM-Baum nach, bis es das nächste nicht-statische Element (absolute|relative feste Position) findet. HTML verwendet standardmäßig das Element, wenn es nicht gefunden wird. Mit anderen Worten: Ihr absolut positioniertes Element wird auf dem Bildschirm anders aussehen, als Sie erwarten. Wenn Sie auf einigen älteren Browsern aufbauen, könnte man denken, dass die Lösung für diese Situation darin besteht, sowohl relative als auch Sticky-Positionierung festzulegen:
.footerwithAbsolutePositionedeChildren{
position: relative;/*don't forgot this*/
}
/*NOTE: @supports has to be at the root,not nested*/
@supports(position:sticky){
.footerwithAbsolutePositionedeChildren{
position: sticky;
bottom: 20px;/now this won't mess with position in non-sticky browsers*/
}
}Warum nicht JavaScript verwenden?
Mit JS können Sie dies definitiv erreichen. Dazu ist jedoch ein Scroll-Ereignis-Listener erforderlich, dessen Hinzufügen zu Ihrer Anwendung immer noch sehr kostspielig ist. Scrollen ist eine der am häufigsten von Benutzern ausgeführten Aktionen, und die Ausführung von JavaScript während dieser Ereignisse macht es schwierig, einen stabilen Scrollvorgang mit 60 FPS (Bildern pro Sekunde) aufrechtzuerhalten. Die Benutzeroberfläche ist nicht mit der Maus/dem Finger/Stift des Benutzers synchronisiert. Dies nennt man Rolling Jank. Es gibt eine spezielle Art von Ereignis-Listener, den sogenannten passiven Ereignis-Listener, der dem Browser mitteilt, dass Ihre Ereignisse nicht aufhören zu scrollen, sodass der Browser diese Ereignisse besser optimieren kann. Sie werden jedoch noch nicht im IE oder Edge unterstützt, Sie benötigen trotzdem den JS-Fallback.
Da position:sticky Sie während des Scrollens nicht in das DOM schreiben, verursachen Sie außerdem kein erzwungenes Layout und keine Neuberechnung des Layouts. So kann der Browser diesen Vorgang auf die GPU verlagern und Sie können sehr reibungslos scrollen, selbst wenn das Sticky-Element abgespielt wird. Besonders geschmeidig geht es im mobilen Sarari.
Außerdem ist das Schreiben von zwei Zeilen deklarativem CSS einfacher als die Verwendung der JS-Alternative.
Kann ich es jetzt verwenden?
position:sticky wird von vielen Browsern unterstützt, jedoch noch nicht in Edge. IE spielt hier keine Rolle, es sei denn, Sie haben vertragliche Verpflichtungen in Enterprise Town. Wenn Sie dieses Verhalten haben müssen, gibt es viele Polyfills, aber alle verwenden JavaScript, sodass Sie die oben genannte Leistung erhalten. Eine bessere Option besteht darin, Ihre App so zu gestalten, dass Sticky Locations eine schicke Ergänzung sind, die App aber immer noch nicht über ihre Funktionalität verfügt.
Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Verwendung der Position: klebrig. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
