Detaillierte Erläuterung der Position der CSS-Sticky-Positionierung: Sticky-Problemgrube

Vorwort: position:sticky ist ein neues Attribut der CSS-Positionierung. Man kann es als eine Kombination aus relativer Positionierung und fester Positionierung bezeichnen. Es wird hauptsächlich zum Überwachen von Bildlaufereignissen verwendet. Einfach ausgedrückt: Wenn während des Gleitvorgangs der Abstand zwischen einem Element und seinem übergeordneten Element die Anforderung für eine klebrige Positionierung erreicht (z. B. oben: 100 px), entspricht die Wirkung von position:sticky zu diesem Zeitpunkt einer festen Positionierung und wird an der entsprechenden Position fixiert.

verwenden:

#klebrige Navigation {
Position: klebrig;
oben: 100px;
}

Position festlegen: klebrig und gleichzeitig eine der folgenden Optionen angeben: oben, unten, rechts, links

Nutzungsbedingungen:

1. Das übergeordnete Element darf keine overflow:hidden- oder overflow:auto-Attribute haben.

2. Sie müssen einen der Werte oben, unten, links und rechts angeben, sonst erfolgt nur die relative Positionierung

3. Die Höhe des übergeordneten Elements kann nicht niedriger sein als die Höhe des klebrigen Elements

4. Sticky-Elemente sind nur innerhalb ihrer übergeordneten Elemente wirksam

Beispiel: CSS-Code:

* {
            Rand: 0;
            Polsterung: 0
        }
        
        HTML-Text {
            Höhe: 100vh;
            Breite: 100%
        }
        
        h1 {
            Höhe: 200px;
            Position: relativ;
            Hintergrundfarbe: hellblau;
        }
        
        h1:nach {
            Inhalt: '';
            Position: absolut;
            oben: 100px;
            links: 0;
            Breite: 100 %;
            Höhe: 2px;
            Hintergrundfarbe: rot;
        }
        
        #klebrige Navigation {
            Position: klebrig;
            /*Position: absolut;*
            links: 0;*/
            oben: 100px;
            Breite: 100 %;
            Höhe: 80px;
            Hintergrundfarbe: gelbgrün;
        }
        
        .scroll-container {
            Höhe: 600px;
            Breite: 100 %;
            Hintergrundfarbe: hellgrau;
        }

HTML Quelltext:

<h1>200px hoch; 100px von oben</h1>
    <div id="sticky-nav">Dies ist eine Tab-Umschaltleiste. Positionieren Sie den Sticky oben bei 100 px.</div>
    <p class="scroll-container">Es wird gescrollt</p>
    <p class="scroll-container" style="background:lightgoldenrodyellow;">Es wird gescrollt</p>

Im Projekt aufgetretene Fallstricke:

Sehen wir uns zunächst die Unterstützung von position:sticky für jeden Kernel an.

Problembeschreibung:

In einem kleinen Programmentwicklungsprojekt; die Tabs-Komponente verwendet eine Sticky-Positionierung, die das Umschalten der Tab-Leiste beinhaltet; am unteren Rand der Tab-Leiste wird der Listencontainer-Inhalt einer großen Liste angezeigt; der angezeigte Inhalt hat ein Klickereignis (oder Touch-Ereignis); der Test von Klicks in iOS- und PC-Browsern ist normal; aber in Android-Telefonen! ! ! ! Oh mein Gott, der Klick ist durchgegangen! ! Außerdem habe ich versucht, den Klicksprung des Elements im Listencontainer zu entfernen und habe festgestellt, dass das Klicken auf den Tabulatorschalter keine Reaktion gab und das Ereignis verschwand! ! !

Legen Sie einen Haltepunkt fest, um die Richtung des Ereignisflusses anzuzeigen: zuerst Ereigniserfassung --> Zielknotenregisterkarte --> Ereignisblasenbildung; diese Blase erreicht tatsächlich das Element in der Containerliste. . . Ein Albtraum. Die Projektstruktur sieht grob wie folgt aus:

HTML-Struktur:

<div Klasse="Dienst-Wrap">
        <tab>Dies ist ein Tab-Schalter</tab>
        <div Klasse="Listencontainer">
            <!--For-Schleife hat viele Elemente-->
            <Artikel></Artikel>
            <Artikel></Artikel>
        </div>
    </div>

Lösung:

1. Wenn Sie die Registerkarte der Komponentenbibliothek verwenden, platzieren Sie ein Div auf der äußeren Ebene, um Klickpenetration und abnormalen Ereignisfluss zu verhindern, oder (eine vorübergehende Lösung, abhängig vom Geschäftsszenario).

2. Der Stil der Komponentenbibliothek kann nicht geändert werden. Sticky wird als Inline-Stil der Registerkartenkomponente verwendet. Da ich diese Registerkarte direkt oben im Ansichtspunkt verwende, kann dieser Effekt mit Fixed erzielt werden. Ich habe position:fixed !import außerhalb der aufrufenden Klasse festgelegt; der Stil hat die höchste Priorität, den Positionierungsstil in der Komponentenbibliothek zu überschreiben, und alles funktioniert einwandfrei.

Einige Gedanken:

Die Kompatibilität von position:sticky mit Android ist einfach herzzerreißend. Derzeit gibt es viele Handynutzer, und beides muss berücksichtigt werden. Aufgrund der schlechten Unterstützung des Android-Systems für Sticky Positioning ist es besser, Sticky nicht zu verwenden, wenn das Geschäftsszenario mit einer anderen Positionierung gelöst werden kann. . . . Hinterlässt traurige Tränen. . . .

PS: Wenn Sie andere Lösungen haben, lassen Sie es mich bitte wissen, danke.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.