Detaillierte Erklärung mehrerer cleverer Anwendungen von position:sticky sticky positioning

Detaillierte Erklärung mehrerer cleverer Anwendungen von position:sticky sticky positioning

Hintergrund: Position: Sticky wird auch Sticky-Positionierung genannt. Sticky-positionierte Elemente sind auf das Scrollen des Benutzers angewiesen, um zwischen der relativen und der festen Positionierung zu wechseln. Das Element wird entsprechend dem normalen Dokumentfluss positioniert und dann relativ zu seinem nächsten scrollenden Vorgänger und dem enthaltenen Block (nächster Vorgänger auf Blockebene), einschließlich tabellenbezogener Elemente, versetzt, basierend auf den Werten oben, rechts, unten und links.

Die Sticky-Positionierung kann als eine Mischung aus relativer und fester Positionierung betrachtet werden. Elemente werden relativ positioniert, bis sie einen bestimmten Schwellenwert überschreiten. Danach werden sie fixiert. Zum Beispiel:

#eins { position: klebrig; oben: 10px; }

Bei Elementen mit den oben festgelegten Stilen werden die Elemente relativ positioniert, bis der Ansichtsbereich auf eine Entfernung von weniger als 10 Pixel vom oberen Rand des Elements gescrollt wird. Danach wird das Element in einem Abstand von 10px vom oberen Rand fixiert, bis der Viewport wieder unter den Schwellenwert scrollt.

Beachten:

  • Die Elementpositionierung verhält sich wie eine relative Positionierung, bis sie einen bestimmten Schwellenwert überschreitet, und wird dann zu einer festen Positionierung.
  • Damit die Fixierung wirksam wird, müssen Sie einen der oberen, rechten, unteren oder linken Schwellenwerte angeben. Ansonsten verhält es sich wie bei der relativen Positionierung.
  • Der Offsetwert hat keinen Einfluss auf die Position anderer Elemente. Dieser Wert erstellt immer einen neuen Stapelkontext.
  • Ein Sticky-Element wird an seinem nächsten Vorgänger fixiert, der über einen Bildlaufmechanismus verfügt (wenn der Überlauf dieses Vorgängers ausgeblendet, gescrollt, automatisch oder überlagert ist), selbst wenn dieser Vorgänger nicht der nächste tatsächlich scrollbare Vorgänger ist.

Anwendungsbeispiele

1. Grundlagen: Kopffixierung

Die Kopfnavigationsleiste ist zunächst relativ oben positioniert. Beim Scrollen der Seitenelemente wird sie ähnlich wie bei „fixiert“ fest positioniert. 

<Hauptklasse="Hauptcontainer">
  <header class="main-header">KOPFSCHRIFT</header>
  <div class="main-content">HAUPTINHALT</div>
  <footer class="main-footer">FUSSZEILE</footer>
</main>


.Hauptcontainer {
  maximale Breite: 500px;
  Höhe: 500px;
  Rand: 0 automatisch;
  Rand oben: 40px;
  Überlauf: automatisch;
}
.Hauptcontainer *+* {
  Rand oben: 20px;
}
.Hauptheader {
  Höhe: 50px;
}
.Hauptinhalt {
  Mindesthöhe: 600px;
}
.Hauptheader {
  Position: -WebKit-Sticky;
  Position: klebrig;
  oben: 0;
}

2. Grundlagen: Fester Footer

Der Fußzeilen-Fixeffekt ist am Anfang auch ein relativ fester Positionierungseffekt. Wenn die Seite über die Fußzeile hinaus gescrollt wird, wird der Fußzeilen-Positionierungseffekt zu einem relativen Positionierungseffekt, der zum Anzeigen einiger Informationen oder Anzeigen am unteren Rand verwendet werden kann. 

<Hauptklasse="Hauptcontainer">
  <header class="main-header">KOPFSCHRIFT</header>
  <div class="main-content">HAUPTINHALT</div>
  <footer class="main-footer">FUSSZEILE</footer>
</main>
<div Klasse="Gerät"></div>


.Hauptcontainer *+* {
  Rand oben: 20px;
}
.Hauptheader {
  Höhe: 50px;
}
.Hauptinhalt {
  Mindesthöhe: 600px;
}
.Hauptfußzeile {
  Position: -WebKit-Sticky;
  Position: klebrig;
  unten: 0;
  Rahmenfarbe: rot;
}
.devide {
  Höhe: 600px;
}

3. Grundlagen: Feste Seitenleiste

Wenn die Seite gescrollt wird und die Position den oberen Schwellenwert der Seitenleiste überschreitet, wird die Seitenleiste fixiert und kann zur Implementierung einer seitlichen Navigationsleiste oder einer seitlichen Eingabeaufforderung mit Informationen und Werbung verwendet werden. 

<div Klasse="scrollen">
  <div Klasse="Wrapper cf">
    <div Klasse="Inhalt">
      <h1>Nach unten scrollen!</h1>
      <p>Der Bewohner ist ein sehr gesunder Mensch mit viel Körperbau und viel männlichem Ruhm. Der Körper ist sehr stark, sehr gesund, sehr aktiv, sehr warm. Ich lebe an einem sehr kalten Ort. Die Luft ist sehr gesund. Mauritius ist sehr alt.</p>
      <p>Mir ist so schlecht, ich bin so müde, ich bin so erschöpft, ich bin so müde, ich bin so erschöpft, ich bin so müde!</p>
    </div>
    <div Klasse="Seitenleiste">
      <h3>Seitenleiste</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab maxime fugiat perspiciatis.</p>
    </div>
  </div>
</div>


.cf:vorher, .cf:nachher {
  Inhalt: " ";
  Anzeige: Tabelle;
  klar: beides;
}
.cf {
  *Zoom: 1;
}
.scroll {
  Höhe: 500px;
  Überlauf: scrollen;
  Polsterung: 0 10px;
  maximale Breite: 500px;
  Rand: 40px automatisch;
  Hintergrund: #FFFFFF;
}
.Inhalt {
  Polsterung: 0 15px;
  Breite: 280px;
}
.Seitenleiste {
  Polsterung: 20px;
  Breite: 170px;
  Hintergrund: #2D2D2D;
  Farbe: #FFFFFF;
}
.Inhalt, .Seitenleiste {
  schweben: links;
}
.Seitenleiste {
  Position: -WebKit-Sticky;
  Position: klebrig;
  oben: 15px;
}

4. Grundlagen: Listenanker

Der feste Effekt „Seiten-Scroll-Anker“ kann nur durch CSS erreicht werden, mit dem sich Adressbuch-Scrolleffekte, Protokolldatensatz-Scrolleffekte und andere Kategorielisten-Scrolleffekte erzielen lassen. 

 <div Klasse="Container">
  <div Klasse="Liste">
    <div Klasse="Listengruppe">
      <div class="list-header">EIN</div>
      <div Klasse="Listeninhalt">
        <div>Apfel</div>
        <div>Artischocke</div>
        <div>Erdferkel</div>
        <div>Ameise</div>
        <div>Eichel</div>
      </div>
    </div>
    <!-- ... -->
    <div Klasse="Listengruppe">
      <div Klasse="Listenkopfzeile">D</div>
      <div Klasse="Listeninhalt">
        <div>Hund</div>
        <div>Datum</div>
        <div>Dänisch</div>
        <div>Löwenzahn</div>
      </div>
    </div>
  </div>
</div>

@supports CSS-At-Regel Sie können eine Deklaration angeben, die von der Browserunterstützung für eine oder mehrere bestimmte CSS-Funktionen abhängt. Dies wird als Feature-Abfrage bezeichnet. Diese Regel kann auf der obersten Ebene Ihres Codes platziert oder in jede andere bedingte Gruppenregel verschachtelt werden.

@supports (Position: klebrig) {
  .Listenkopfzeile {
    Position: klebrig;
    oben: 0;
  }
}
.container {
  Breite: 500px;
  Höhe: 500px;
  Rand: 40px automatisch;
  Position: relativ;
  Überlauf: automatisch;
}
.Liste {
  Mindesthöhe: 1600px;
  Hintergrund: #FFFFFF;
}
.Listeninhalt {
  Polsterung: 10px 20px;
}
.Listenkopfzeile {
  Polsterung: 10px;
  Hintergrund: #2D2D2D;
  Farbe: #FFFFFF;
  Position: relativ;
  Schriftstärke: fett;
}

5. Erweitert: Fixierte Tabellenüberschrift

Position festlegen: Durch Anheften am th- oder tr-Element des Tabellenelements können Sie die Tabellenüberschrift oder eine Zeile fixieren oder mehrere Tabellen miteinander verbinden. Beim Scrollen zur aktuellen Tabelle wird die fixierte Überschrift automatisch zur Überschrift der aktuellen Tabelle. 

<div Klasse="Container">
  <Tabelle>
    <Kopf>
      <tr Klasse="rot">
        <th>Name</th>
        <th>Alter</th>
        <th>Arbeit</th>
        <th>Farbe</th>
        <th>URL</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem.</td>
        <td>Ullam.</td>
        <td>Gr.</td>
        <td>Um.</td>
        <td>Quis.</td>
      </tr>
      <!-- ... -->
      <tr Klasse="grün">
        <th>Name</th>
        <th>Alter</th>
        <th>Arbeit</th>
        <th>Farbe</th>
        <th>URL</th>
      </tr>
     <!-- ... -->
    </tbody>
  </Tabelle>
</div>
.container {
  Höhe: 500px;
  Breite: Inhalt anpassen;
  Rand: 40px automatisch;
x Überlauf: automatisch;
}
Tisch {
  Textausrichtung: links;
  Position: relativ;
  Rahmen-Zusammenbruch: Zusammenbruch;
}
th, td {
  Polsterung: 0,25rem;
}
tr:n-tes-Kind(gerade) {
  Hintergrund: #EFEFEF;
}
tr.red th {
  Hintergrund: #dd4a63;
  Farbe: weiß;
}
tr.grün th {
  Hintergrund: #03C03C;
  Farbe: weiß;
}
tr.blau th {
  Hintergrund: #1580d8;
  Farbe: weiß;
}
das {
  Hintergrund: weiß;
  Position: klebrig;
  oben: 0;
}

6. Erweitert: Seitenfortschrittsbalken (einfach)

Durch die Verwendung von position: sticky; positioning können Sie einen Fortschrittsbalkeneffekt beim Seitendurchlauf erzielen. Im Folgenden sehen Sie eine Demonstration eines einfachen Fortschrittsbalkens. In der tatsächlichen Implementierung können Sie die Elemente, die nicht nach oben gescrollt wurden, auf transparente Farbe setzen und sie blau färben, wenn sie nach oben gescrollt werden. 

<div Klasse="Container">
  <h1>Klebriger Fortschritt</h1>
  <div Klasse="sticky"></div>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, cumque? A, est perferendis explicabo odit possimus quisquam rem ad tempore ipsa, obcaecati ex culpa similique, aliquam corporis. Quis, nostrum expedita.</p>
  <!-- ... -->
  <div Klasse="sticky"></div>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, cumque? A, est perferendis explicabo odit possimus quisquam rem ad tempore ipsa, obcaecati ex culpa similique, aliquam corporis. Quis, nostrum expedita.</p>
</div>


.container {
  Breite: 500px;
  Höhe: 500px;
  Überlauf: automatisch;
  Rand: 40px, automatisch 40px;
  Polsterung unten: 500px;
  Box-Größe: Rahmenbox;
}
.klebrig {
  Breite: 50px;
  Höhe: 10px;
  Hintergrund: rgba (36, 167, 254, 0,979);
  Position: -WebKit-Sticky;
  Position: klebrig;
  oben: 0;
}
.sticky:n-ter-Typ(2) {
  transformieren: übersetzenX(50px);
}
.sticky:n-ter-Typ(3) {
  transformieren: übersetzenX(100px);
}
.sticky:n-ter-Typ(4) {
// ... 
.sticky:n-ter-Typ(10) {
  transformieren: übersetzenX(450px);
}

7. Erweitert: Seitenfortschrittsbalken (Optimierung)

Der optimierte Fortschrittsbalken unterstützt die prozentuale Anzeige des Browsing-Fortschritts, was zur Verbesserung des Benutzererlebnisses beiträgt. 

<Artikel>
  <div Klasse="Artikeltitel">
    <h1>Beispiel für einen Seitenfortschrittsbalken</h1>
    <div Klasse="Fortschritt-Wrapper">
      <div Klasse = "Fortschrittslabel"></div>
      <Fortschritt></Fortschritt>
    </div>
  </div>
  <img src=""/>
  <p><em>Alle Bilder wurden nach dem Zufallsprinzip aus Codepen-Ressourcen bereitgestellt. Alle Ipsum-Texte wurden von officeipsum.com bereitgestellt.</em></p>
  <p>Persönliche Gespräche mit den besten Chancengleichheits-Highlights. Backen Sie es in einen Benchmark für schnelle Gewinne oder schlagen Sie auf beiden Seiten. Das Rad neu erfinden. Was würden Sie Ihrer Meinung nach beitragen, wenn Sie für diese Position eingestellt würden? Trinken Sie aus dem Feuerwehrschlauch, aber die Quartalsumsätze sind auf einem historischen Tiefstand oder können Sie die Kosten pro Einheit für mich schätzen, uns geht die Startbahn aus.</p>
  <!-- ... -->
  <img src=""/>
  <p>Meeting-Attentäter genug, um sich das Gesicht zu waschen. Nachdem ich Helen in einem Restaurant begegnet bin, wurde mir klar, dass sie nur ein ziemlich gutes Büro-Optik-Mädchen war. Leg eine Platte auf und schau, wer tanzt. Aber wir sind in dieser Hinsicht der Zeit voraus, oder in der persönlichen Entwicklung. Benchmarking-Optimierung. Helikopter-Ansicht-Highlights. Nimm dir fünf Minuten, schlag auf den Baum ein und komm mit klarem Kopf hierher zurück. Also, unsere Vision einer marktführenden Plattform umsetzen. Und wie ist der Status der Leistungen für eow?</p>
</Artikel>


:Wurzel {
  --Fortschrittsbalkenhöhe: 4px;
  --Fortschrittsbalkenfarbe: gainsboro;
  --Fortschrittsbalken-Wertfarbe: Dodgerblue;
  --Fortschrittsbalken-Wert: 20 %;
}
Artikel {
  Position: relativ;
  Polsterung: 24px;
  Breite: 100 %;
  maximale Breite: 700px;
  Rand: 60px automatisch;
}
.Artikeltitel {
  Position: klebrig;
  oben: 0;
  Polsterung unten: 24px;
}
img {
  Breite: 100 %;
  Rand unten: 18px;
}
.progress-wrapper {
  Position: relativ;
}
.Fortschrittsbezeichnung {
  Position: absolut;
  rechts: 0;
  unten: 0;
  Schriftgröße: 14px;
}
Fortschritt
  -webkit-auftritt: keines;
  -moz-Aussehen: keines;
  Aussehen: keines;
  Position: absolut;
  Breite: 100 %;
  Höhe: var(--Fortschrittsbalkenhöhe);
  Hintergrundfarbe: var(--progress-bar-color);
  Rand: keiner;
}
Fortschritt::-moz-Fortschrittsbalken {
  Hintergrundfarbe: var(--progress-bar-value-color);
}
Fortschritt::-WebKit-Fortschrittsbalken {
  Hintergrundfarbe: var(--progress-bar-color);
}
Fortschritt::-WebKit-Fortschritt-Wert {
  Hintergrundfarbe: var(--progress-bar-value-color);
}
Fortschritt::-ms-fill {
  Hintergrundfarbe: var(--progress-bar-value-color);
}

Prozentsätze berechnen und anzeigen

$(Dokument).bereit(Funktion() {
  const win = $(Fenster);
  const doc = $(Dokument);
  const progressBar = $('Fortschritt');
  const progressLabel = $('.progress-label');
  const setValue = () => win.scrollTop();
  const setMax = () => doc.height() - win.height();
  const setPercent = () => Math.round(win.scrollTop() / (doc.height() - win.height()) * 100);
  progressLabel.text(setPercent() + '%');
  progressBar.attr({ Wert: setValue(), max: setMax() });
  doc.on('scroll', () => {
    progressLabel.text(setPercent() + '%');
    progressBar.attr({ Wert: setValue() });
  });
  win.on('Größe ändern', () => {
    progressLabel.text(setPercent() + '%');
    progressBar.attr({ Wert: setValue(), max: setMax() });
  })
});

8. Erweitert: Zeitleiste

Die Zeitleiste ist eine erweiterte Version des obigen Listenankers und kann in Anwendungen wie Jahrbuchanzeige, Notizblock, Tudo-Liste usw. verwendet werden. 

<div id="Wrapper">
  <div id="Behälter">
    <h1>Zeitleiste</h1>
    <ol Klasse="Zeitleiste">
      <li>
        <h2>1997</h2>
        <ol>
          <li>
            <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
            <p>Es ist nicht purus vel orci molestie consequat.</p>
          </li>
          <li>
            <h3>Etiam und Geschwindigkeit im Bogen und consectetur aliquet und eu metus</h3>
            <p>Sed vitae diam rhoncus, imperdiet nunc quis, lacinia nulla.</p>
          </li>
        </ol>
      </li>
      <!-- ... -->
      <li>
        <h2>Heute</h2>
      </li>
    </ol>
  </div>
</div>
ol.timeline ol, ol.timeline, html, body {
  Rand: 0;
  Polsterung: 0;
}
*, *:vor, *:nach {
  Box-Größe: Rahmenbox;
}
#Wrapper {
  Rand: 0 automatisch;
  maximale Breite: 64em;
}
#Behälter {
  schweben: links;
  Polsterung: 1em;
  Breite: 100 %;
}
h1, h2 {
  Textausrichtung: zentriert;
}
ol.timeline， ol.timeline ol {
  Listenstil: keiner;
}
ol.timeline>li {
  Polsterung links: 2px;
  Position: relativ;
}
ol.timeline>li:vor {
  Hintergrundfarbe: #a2ed56;
  Inhalt: "";
  Höhe: 100%;
  links: 0;
  Position: absolut;
  oben: 0;
  Breite: 2px;
}
@media nur Bildschirm und (Mindestbreite: 40em) {
  ol.timeline>li:vor {
    links: 50%;
    transformieren: übersetzenX(-50%);
  }
}
ol.timeline>li>h2 {
  Hintergrundfarbe: #a2ed56;
  Farbe: #1d1f20;
  Rand: 0;
  Position: -WebKit-Sticky;
  Position: klebrig;
  Texttransformation: Großbuchstaben;
  oben: 0;
}
@media nur Bildschirm und (Mindestbreite: 40em) {
  ol.timeline>li>h2 {
    Randradius: 0,25em;
    Rand: 0 automatisch;
    Rand unten: 1em;
    maximale Breite: 200px;
  }
}
ol.timeline>li>ol {
  Anzeige: Flex;
  Flex-Wrap: Umwickeln;
}
ol.timeline>li>ol>li {
  Rahmen oben: 2px durchgezogen #a2ed56;
  Flexion: 0 0 100 %;
  Polsterung: 0 0 0,5em 1em;
}
@media nur Bildschirm und (Mindestbreite: 40em) {
  ol.timeline>li>ol>li {
    Flex-Basis: 50%;
  }
  ol.timeline>li>ol>li:n-tes Kind(ungerade) {
    Polsterung links: 0;
    Polsterung rechts: 1em;
  }
  ol.timeline>li>ol>li:nth-child(gerade) {
    Rand oben: 2em;
    Polsterung rechts: 0;
  }
}
ol.timeline>li>ol>li>h3:erstes-Kind {
  Farbe: #a2ed56;
  Rand unten: -0,75em;
}
ol.timeline>li:nth-child(6n+2):vorher,
ol.timeline>li:n-tes-Kind(6n+2)>h2 {
  Hintergrundfarbe: #83e4e2;
}
ol.timeline>li:n-tes-Kind(6n+2)>ol>li {
  Rahmenfarbe: #83e4e2;
}
ol.timeline>li:n-tes-Kind(6n+2)>ol>li h3 {
  Farbe: #83e4e2;
}
ol.timeline>li:nth-child(6n+3):vorher,
ol.timeline>li:n-tes-Kind(6n+3)>h2 {
  Hintergrundfarbe: #fd6470;
}
ol.timeline>li:n-tes-Kind(6n+3)>ol>li {
  Rahmenfarbe: #fd6470;
}
ol.timeline>li:n-tes-Kind(6n+3)>ol>li h3 {
  Farbe: #fd6470;
}
ol.timeline>li:nth-child(6n+4):vorher,
ol.timeline>li:n-tes-Kind(6n+4)>h2 {
  Hintergrundfarbe: #fca858;
}
ol.timeline>li:n-tes-Kind(6n+4)>ol>li {
  Rahmenfarbe: #fca858;
}
ol.timeline>li:n-tes-Kind(6n+4)>ol>li h3 {
  Farbe: #fca858;
}
ol.timeline>li:nth-child(6n+5):vorher,
ol.timeline>li:n-tes-Kind(6n+5)>h2 {
  Hintergrundfarbe: #fddc32;
}
ol.timeline>li:n-tes-Kind(6n+5)>ol>li {
  Rahmenfarbe: #fddc32;
}
ol.timeline>li:n-tes-Kind(6n+5)>ol>li h3 {
  Farbe: #fddc32;
}
ol.timeline>li:nth-child(6n+6):vorher,
ol.timeline>li:n-tes-Kind(6n+6)>h2 {
  Hintergrundfarbe: #fafafa;
}
ol.timeline>li:n-tes-Kind(6n+6)>ol>li {
  Rahmenfarbe: #fafafa;
}
ol.timeline>li:n-tes-Kind(6n+6)>ol>li h3 {
  Farbe: #fafafa;
}

9. Erweitert: Textstapeleffekt 

<p>Eine <b>Schriftrolle</b> (aus dem Altfranzösischen <i>escroe</i> oder <i>escroue</i>), auch <b>Rolle</b> genannt, ist eine beschriebene Rolle aus Papyrus, Pergament oder Papier.</p>
<h2>Struktur</h2>
<p>Eine Schriftrolle ist normalerweise in Seiten unterteilt, die manchmal aus einzelnen Papyrus- oder Pergamentblättern bestehen, die zusammengeklebt sind
  an den Rändern zusammengefügt oder markierte Abschnitte einer durchgehenden Rolle Schreibmaterial sein. Die Rolle ist in der Regel
  ausgerollt, so dass immer eine Seite zum Schreiben oder Lesen freiliegt, während die übrigen Seiten aufgerollt sind
  links und rechts der sichtbaren Seite. Es wird von Seite zu Seite ausgerollt, und der Text wird zeilenweise von oben nach unten geschrieben.
  zum Ende der Seite. Je nach Sprache können die Buchstaben von links nach rechts, von rechts nach links oder
  abwechselnd in der Richtung (Boustrophedon).</p>
<p>Einige Rollen sind einfach aufgerollte Seiten; andere haben Holzrollen an jedem Ende: Thorarollen haben eher
  aufwendige Rollen, die ihrer zeremoniellen Funktion angemessen sind.</p>
<h2>Geschichte der Schriftrollenverwendung</h2>
<p>Schriftrollen waren die erste Form editierbarer Aufzeichnungstexte und wurden im alten Ägypten im östlichen Mittelmeerraum verwendet.
  Zivilisationen. Pergamentrollen wurden unter anderem von den Israeliten verwendet, bevor der Kodex oder das gebundene Buch mit
  Pergamentseiten wurden von den Römern erfunden und erfreuten sich im 1. Jahrhundert n. Chr. großer Beliebtheit. Schriftrollen waren
  Bis in die Römerzeit hinein galten sie als Kodizes und waren dort normalerweise einspaltig in Breitengraden verfasst.</p>
<p>Die Tinte, die zum Schreiben von Schriftrollen verwendet wurde, musste auf einer Oberfläche haften, die aufgerollt und wieder abgerollt wurde. Daher wurden spezielle Tinten verwendet.
  entwickelt. Trotzdem blätterte die Tinte langsam von den Schriftrollen ab.</p>
<h2>Rollen</h2>
<p>Rollen mit Aufzeichnungen britischer Parlamentsgesetze, aufbewahrt im Parlamentsarchiv, Palace of Westminster, London</p>


html {
  Rand: 0 automatisch;
  Überlauf: automatisch;
  Position: relativ;
  Textausrichtung: Blocksatz;
  Schriftgröße: 32px;
  Hintergrund: #FDFC47;
  Hintergrund: -webkit-linear-gradient (nach rechts, #24FE41, #FDFC47);
  Hintergrund: linearer Farbverlauf (nach rechts, #24FE41, #FDFC47);
}
Körper {
  maximale Breite: 500px;
  Höhe: 500px;
  Überlauf: automatisch;
  Farbe: #2D2D2D;
  Rand: 40px automatisch;
  Hintergrund: #FFFFFF;
}
body::nach, *::vor, span {
  Position: klebrig;
  oben: 0em;
  unten: 0em;
  Leerzeichen: Nowrap;
}
p, h2, div {
  Anzeige: inline;
  Schriftgröße: 1rem;
}
h2::vor {
  Inhalt: "§ ";
}
p::vor {
  Inhalt: "¶ ";
}
h2 {
  Farbe: rgba(255, 100, 100, 1);
}
b, ich {
  Farbe: rgba (255, 100, 100, 0,7);
}


[].forEach.call(document.querySelectorAll("p,li,h2,a"), Funktion (el) {
  el.innerHTML = el.innerHTML
    .Teilt(" ")
    .map(Wort => `<span>${Wort}</span>`)
    .verbinden(" ");
});
// Scrollfunktion automatisch auslösen autoscroll() {
  document.scrollingElement.scrollBy({ top: 10, behavior: "glatt" });
}
var INTRVL = setInterval(autoscroll, 100);
Funktion stop() {
  Intervall löschen(INTRVL);
}
document.documentElement.addEventListener("Mausbewegung", Stopp);

10. Fortgeschritten: Puzzle-Effekt 

<div Klasse="Container">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="450" ​​​​height="450">
    <Pfad Vektoreffekt="nicht skalierender Strich"
      d="M0,0L150,0 M150,0L149.56893390347997,15.321019590342566C149.13786780695992,30.64203918068513,148.2757356139198,61.28407836137026,140.06938800617533,66.48104320534887C131.86304039843085,71.67800804932747,116.31247737598203,51.42989855659955,106.0863237976504,55.4571772015448C95.86017021931877,59.48445584649006,90.9584260851044,87.78712262910848,98.31560238205316,93.31985483432332C105.67277867900191,98.85258703953816,125.28887540711382,81.6153846673494,135.9460950819655,87.26708643206159C146.60331475681716,92.91878819677378,148.30165737840858,121.45939409838688,149.1508286892043,135.72969704919345L150,150 M150,150L136.2498867270519,151.19262015043395C122.49977345410377,152.3852403008679,94.99954690820755,154.7704806017358,88.63886136501219,149.5799358844125C82.27817582181684,144.38939116708917,97.05703128132234,131.62306143157463,91.89335174152377,123.41848757977095C86.72967220172522,115.21391372796728,61.62345766262259,111.57109575987448,57.41601665267879,118.35387216181743C53.20857564273499,125.13664856376043,69.89990816195004,142.34501933573918,63.81370097469671,149.3569730371089C57.727493787443386,156.36892673847862,28.863746893721693,153.1844633692393,14.431873446860846,151.59223168461963L0,150 M0,150L0,0">
    </Pfad>
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="450" ​​​​height="450">
    <Pfad Vektoreffekt="nicht skalierender Strich"
      d="M150,0L300,0 M300,0L301.2001963896525,13.663912396847081C302.4003927793049,27.327824793694163,304.8007855586098,54.655649587388325,315.7289704558163,60.746116994185364C326.65715535302274,66.8365844009824,346.11313236813083,51.689694420882326,354.081986768881,55.80894999394135C362.0508411696312,59.92820556700036,358.53257295602356,83.31360669321847,348.48816537765833,86.90520621265637C338.4437577992932,90.49680573209427,321.8732108561706,74.29460364475196,312.70416006576795,81.51143567484586C303.5351092753653,88.72826770493975,301.7675546376827,119.36413385246988,300.88377731884134,134.68206692623494L300,150 M300,150L286.49220155219564,153.40139161409138C272.98440310439133,156.80278322818276,245.96880620878264,163.60556645636552,239.32641647452138,153.94479145535482C232.68402674026015,144.28401645434414,246.41484416734636,118.15968322414001,242.3006348061616,105.81822033151734C238.1864254449769,93.47675743889465,216.22718929552127,94.91816488385344,212.44095852197418,106.97564801958445C208.65472774842706,119.03313115531546,223.0415023507886,141.70668998181873,215.66351015977762,150.64676126035002C208.2855179687667,159.5868325388813,179.14275898438336,154.79341626944066,164.57137949219168,152.39670813472034L150,150 M150,150L149.1508286892043,135.72969704919345C148.30165737840858,121.45939409838688,146.60331475681716,92.91878819677378,135.9460950819655,87.26708643206159C125.28887540711382,81.6153846673494,105.67277867900191,98.85258703953816,98.31560238205316,93.31985483432332C90.9584260851044,87.78712262910848,95.86017021931877,59.48445584649006,106.08632379765042,55.4571772015448C116.31247737598203,51.42989855659955,131.86304039843085,71.67800804932747,140.06938800617533,66.48104320534887C148.2757356139198,61.28407836137026,149.13786780695992,30.64203918068513,149.56893390347997,15.321019590342566L150,0">
    </Pfad>
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="450" ​​​​height="450">
    <Pfad Vektoreffekt="nicht skalierender Strich"
      d="M300,0L450,0 M450,0L450,150 M450,150L434.583326652323,153.59126987393032C419.166653304646,157.18253974786066,388.33330660929204,164.3650794957213,381.63610015762214,153.82556747666192C374.93889370595224,143.28605545760252,392.3778274979664,115.02449167162312,388.42595723945146,104.84691440262078C384.47408698093653,94.66933713361846,359.1314126718925,102.57574638159319,353.73039928686853,112.35801660812949C348.32938590184455,122.14028683466574,362.8700334408407,133.79841803976356,357.2385770470326,140.3847254348356C351.6071206532245,146.97103282990759,325.8035603266123,148.4855164149538,312.9017801633061,149.2427582074769L300,150 M300,150L300.88377731884134,134.68206692623494C301.7675546376827,119.36413385246988,303.5351092753653,88.72826770493975,312.70416006576795,81.51143567484586C321.8732108561706,74.29460364475196,338.4437577992932,90.49680573209427,348.4881653776584,86.90520621265637C358.53257295602356,83.31360669321847,362.0508411696312,59.92820556700036,354.081986768881,55.80894999394135C346.11313236813083,51.689694420882326,326.65715535302274,66.8365844009824,315.7289704558163,60.746116994185364C304.8007855586098,54.655649587388325,302.4003927793049,27.327824793694163,301.2001963896525,13.663912396847081L300,0">
    </Pfad>
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="450" ​​​​height="450">
    <Pfad Vektoreffekt="nicht skalierender Strich"
      d="M0,150L14.431873446860846,151.59223168461963C28.863746893721693,153.1844633692393,57.727493787443386,156.36892673847862,63.81370097469671,149.3569730371089C69.89990816195004,142.34501933573918,53.20857564273499,125.13664856376043,57.41601665267879,118.35387216181743C61.62345766262259,111.57109575987448,86.72967220172522,115.21391372796728,91.89335174152377,123.41848757977095C97.05703128132234,131.62306143157463,82.27817582181684,144.38939116708917,88.63886136501219,149.5799358844125C94.99954690820755,154.7704806017358,122.49977345410377,152.3852403008679,136.2498867270519,151.19262015043395L150,150 M150,150L149.973193265246,163.25569656614937C149.94638653049202,176.51139313229874,149.89277306098404,203.02278626459744,139.50106232498663,210.01231400451468C129.10935158898923,217.0018417444319,108.3795435865024,204.4695040919677,102.3265271760971,209.6171452976796C96.27351076569181,214.7647865033915,104.89728594736806,237.59240656727948,117.94077379386776,242.72519670084048C130.98426164036746,247.85798683440154,148.4474621516906,235.29594703763556,154.52728529684987,241.89260926577427C160.60710844200915,248.48927149391307,155.3035542210046,274.24463574695653,152.65177711050228,287.12231787347827L150,300 M150,300L136.41378134453706,301.9978974423072C122.8275626890741,303.99579488461444,95.65512537814818,307.9915897692289,88.57540847915023,298.65161635895845C81.49569158015227,289.3116429486881,94.50869509308224,266.63590124353277,88.34030337850798,258.57873611175137C82.17191166393371,250.52157097997,56.82212472185521,257.0829824215625,54.049391123131464,265.9486942143682C51.27665752440771,274.81440600717383,71.08097726903871,285.9844181511926,65.83558763907592,292.04368584066674C60.590198009113145,298.1029535301409,30.295099004556572,299.05147676507045,15.147549502278286,299.5257383825352L0,300 M0,300L0,150">
    </Pfad>
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="450" ​​​​height="450">
    <Pfad Vektoreffekt="nicht skalierender Strich"
      d="M150,150L164.57137949219168,152.39670813472034C179.14275898438336,154.79341626944066,208.2855179687667,159.5868325388813,215.66351015977762,150.64676126035002C223.0415023507886,141.70668998181873,208.65472774842706,119.03313115531546,212.44095852197418,106.97564801958445C216.22718929552127,94.91816488385344,238.1864254449769,93.47675743889465,242.30063480616164,105.81822033151734C246.41484416734636,118.15968322414001,232.68402674026015,144.28401645434414,239.32641647452138,153.94479145535482C245.96880620878264,163.60556645636552,272.98440310439133,156.80278322818276,286.49220155219564,153.40139161409138L300,150 M300,150L300.58848922266134,162.76014152121215C301.1769784453226,175.52028304242432,302.3539568906453,201.04056608484862,308.3530463558756,207.02745212005405C314.3521358211059,213.01433815525948,325.17333630624387,199.467827183246,332.782218886124,205.98559997252482C340.39110146600405,212.50337276180366,344.78766614062624,239.0854293123748,337.4179622081037,244.91147931880394C330.04825827558113,250.73752932523306,310.9122857359139,235.80757278752017,302.7149139333725,241.5296584770292C294.5175421308311,247.25174416653817,297.25877106541554,273.6258720832691,298.6293855327078,286.81293604163454L300,300 M300,300L286.8256919800388,302.73826607970113C273.65138396007757,305.4765321594022,247.30276792015522,310.9530643188045,240.96920721709873,302.17538488160477C234.63564651404224,293.3977054444051,248.31714114785163,270.3658144106035,241.5962018751227,261.1615721244882C234.87526260239375,251.95732983837289,207.75188942312647,256.5807362999438,204.08592701851285,267.0803687020843C200.41996461389923,277.5800011042247,220.21141298393937,293.9558594469347,215.10666027662953,300.4218356533489C210.00190756931966,306.88781185976313,180.00095378465983,303.44390592988157,165.0004768923299,301.7219529649408L150,300 M150,300L152.65177711050228,287.12231787347827C155.3035542210046,274.24463574695653,160.60710844200915,248.48927149391307,154.52728529684987,241.89260926577433C148.4474621516906,235.29594703763556,130.98426164036746,247.85798683440154,117.94077379386776,242.72519670084048C104.89728594736806,237.59240656727948,96.27351076569181,214.7647865033915,102.3265271760971,209.61714529767963C108.3795435865024,204.4695040919677,129.10935158898923,217.0018417444319,139.50106232498663,210.01231400451468C149.89277306098404,203.02278626459744,149.94638653049202,176.51139313229874,149.973193265246,163.25569656614937L150,150">
    </Pfad>
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="450" ​​​​height="450">
    <Pfad Vektoreffekt="nicht skalierender Strich"
      d="M300,150L312.9017801633061,149.2427582074769C325.8035603266123,148.4855164149538,351.6071206532245,146.97103282990759,357.2385770470326,140.3847254348356C362.8700334408407,133.79841803976356,348.32938590184455,122.14028683466574,353.73039928686853,112.35801660812946C359.1314126718925,102.57574638159319,384.47408698093653,94.66933713361846,388.42595723945146,104.84691440262078C392.3778274979664,115.02449167162312,374.93889370595224,143.28605545760252,381.63610015762214,153.82556747666192C388.33330660929204,164.3650794957213,419.166653304646,157.18253974786066,434.583326652323,153.59126987393032L450,150 M450,150L450,300 M450,300L436.82050647459147,299.21288768096537C423.641012949183,298.4257753619307,397.28202589836593,296.8515507238614,390.92947621132134,290.8451437251303C384.57692652427676,284.8387367263992,398.23081420100453,274.4001473670062,392.63858789389707,267.74056355085685C387.0463615867896,261.08097973470757,362.20802129584695,258.20040146180196,358.5637941404978,263.2539734591605C354.9195669851488,268.30754545651894,372.46945296539326,281.29526772414147,366.24117279790926,288.7419638593254C360.01289263042526,296.18865999450935,330.0064463152126,298.09432999725465,315.0032231576063,299.04716499862735L300,300 M300,300L298.6293855327078,286.81293604163454C297.25877106541554,273.6258720832691,294.5175421308311,247.25174416653817,302.7149139333725,241.5296584770292C310.9122857359139,235.80757278752017,330.04825827558113,250.73752932523306,337.4179622081037,244.91147931880394C344.78766614062624,239.0854293123748,340.39110146600405,212.50337276180366,332.7822188861239,205.98559997252485C325.17333630624387,199.467827183246,314.3521358211059,213.01433815525948,308.3530463558756,207.02745212005405C302.3539568906453,201.04056608484862,301.1769784453226,175.52028304242432,300.58848922266134,162.76014152121215L300,150">
    </Pfad>
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="450" ​​​​height="450">
    <Pfad Vektoreffekt="nicht skalierender Strich"
      d="M0,300L15.147549502278286,299.5257383825352C30.295099004556572,299.05147676507045,60.590198009113145,298.1029535301409,65.83558763907592,292.04368584066674C71.08097726903871,285.9844181511926,51.27665752440771,274.81440600717383,54.049391123131464,265.9486942143682C56.82212472185521,257.0829824215625,82.17191166393371,250.52157097997,88.34030337850798,258.57873611175137C94.50869509308224,266.63590124353277,81.49569158015227,289.3116429486881,88.57540847915023,298.65161635895845C95.65512537814818,307.9915897692289,122.8275626890741,303.99579488461444,136.41378134453706,301.9978974423072L150,300 M150,300L148.83031623124336,315.20269857598424C147.66063246248675,330.40539715196854,145.3212649249735,360.81079430393703,139.0131598522373,366.1263925430023C132.70505477950113,371.4419907820675,122.428212171542,351.6677901082294,114.69272282609364,354.41710430526285C106.95723348064526,357.1664185022962,101.76309739770763,382.4392475702011,109.89880756507118,387.0560695045038C118.03451773243474,391.6728914388066,139.5000741500995,375.6337062395073,148.40524726430448,382.68169346648966C157.31042037850946,389.72968069347206,153.65521018925475,419.864840346736,151.8276050946274,434.932420173368L150,450 M150,450L0,450 M0,450L0,300">
    </Pfad>
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="450" ​​​​height="450">
    <Pfad Vektoreffekt="nicht skalierender Strich"
      d="M150,300L165.0004768923299,301.7219529649408C180.00095378465983,303.44390592988157,210.00190756931966,306.88781185976313,215.10666027662953,300.4218356533489C220.21141298393937,293.9558594469347,200.41996461389923,277.5800011042247,204.08592701851285,267.0803687020843C207.75188942312647,256.5807362999438,234.87526260239375,251.95732983837289,241.5962018751227,261.1615721244882C248.31714114785163,270.3658144106035,234.63564651404224,293.3977054444051,240.96920721709873,302.17538488160477C247.30276792015522,310.9530643188045,273.65138396007757,305.4765321594022,286.8256919800388,302.73826607970113L300,300 M300,300L300.81935805236554,313.1435162553214C301.63871610473103,326.2870325106428,303.27743220946206,352.5740650212856,312.42784925248606,358.6512204623654C321.57826629551005,364.72837590344517,338.240384276827,350.595654274962,343.55746959332345,356.14998533600493C348.87455490981984,361.7043163970479,342.8466075614958,386.94570014761695,333.8914202613098,392.87903737875376C324.9362329611239,398.8123746098906,313.05380570907613,385.4376653215952,306.9173623402142,391.7398180052308C300.78091897135226,398.0419706888665,300.3904594856761,424.02098534443326,300.1952297428381,437.0104926722167L300,450 M300,450L150,450 M150,450L151.8276050946274,434.932420173368C153.65521018925475,419.864840346736,157.31042037850946,389.72968069347206,148.40524726430448,382.68169346648966C139.5000741500995,375.6337062395073,118.03451773243474,391.6728914388066,109.89880756507118,387.0560695045038C101.76309739770763,382.4392475702011,106.95723348064526,357.1664185022962,114.69272282609363,354.41710430526274C122.428212171542,351.6677901082294,132.70505477950113,371.4419907820675,139.0131598522373,366.1263925430023C145.3212649249735,360.81079430393703,147.66063246248675,330.40539715196854,148.83031623124336,315.20269857598424L150,300">
    </Pfad>
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="450" ​​​​height="450">
    <Pfad Vektoreffekt="nicht skalierender Strich"
      d="M300,300L315.0032231576063,299.04716499862735C330.0064463152126,298.09432999725465,360.01289263042526,296.18865999450935,366.24117279790926,288.7419638593254C372.46945296539326,281.29526772414147,354.9195669851488,268.30754545651894,358.5637941404978,263.2539734591605C362.20802129584695,258.20040146180196,387.0463615867896,261.08097973470757,392.63858789389707,267.74056355085685C398.23081420100453,274.4001473670062,384.57692652427676,284.8387367263992,390.92947621132134,290.8451437251303C397.28202589836593,296.8515507238614,423.641012949183,298.4257753619307,436.82050647459147,299.21288768096537L450,300 M450,300L450,450 M450,450L300,450 M300,450L300.1952297428381,437.0104926722167C300.3904594856761,424.02098534443326,300.78091897135226,398.0419706888665,306.9173623402142,391.7398180052308C313.05380570907613,385.4376653215952,324.9362329611239,398.8123746098906,333.8914202613098,392.87903737875376C342.8466075614958,386.94570014761695,348.87455490981984,361.7043163970479,343.55746959332345,356.14998533600493C338.240384276827,350.595654274962,321.57826629551005,364.72837590344517,312.42784925248606,358.6512204623654C303.27743220946206,352.5740650212856,301.63871610473103,326.2870325106428,300.81935805236554,313.1435162553214L300,300">
    </Pfad>
  </svg>
</div>
.container {
  Breite: 470px;
  Rand: 40px automatisch;
  Hintergrund: #FFFFFF;
  Höhe: 450px;
  Überlauf: automatisch;
}
svg {
  Position: -WebKit-Sticky;
  Position: klebrig;
  oben: 0;
}
Weg {
  Füllung: keine;
  Strich: #2D2D2D;
  Strichstärke: 1,5px;
}

Weitere hervorragende Fälle

Kalender: https://codepen.io/dannievinther/details/pGdjPV
Absatz Anzeige https://codepen.io/burmepotato/ten/qbbqpnb
Foliekarten https://codepen.io/kseso/pen/jyewop
Wasserfall https://codepen.io/collinsworth/pen/aejgvg
Untertitelartikeltitel https://codepen.io/coderthegrat/details/abzropg
Mausradsteuerelement https://codepen.io/equinusocio/ten/gebxjz
Seitenlayout https://codepen.io/havardob/details/gopnpmm
Seitenlayout https://codepen.io/ncerminara/pen/vdlpzd

Kompatibilität

Wie in der folgenden Abbildung gezeigt, unterstützen nicht alle Browser den Skicky -Positionierungsmodus, und es wird nicht empfohlen, in großen Anwendungen weit verbreitet zu sein.

Polyfill

StickyFill: https://github.com/wilddeer/stickyfill

Damit schließt sich dieser Artikel über mehrere clevere Position der Position ab: klebrige Positionierung.

<<:  Layui table wählt das Optionsfeld der angegebenen Zeile aus und scrollt zum Implementierungscode der Zeile

>>:  Detaillierte Erläuterung der verschachtelten Tabelle im Vue-ElementUI-Formular und der Überprüfung jeder Zeile

Artikel empfehlen

Implementierung der Docker-Bereitstellung des Nuxt.js-Projekts

Offizielle Docker-Dokumentation: https://docs.doc...

MySQL-Abfragedaten für heute, diese Woche, diesen Monat und letzten Monat

Heute Wählen Sie * aus Tabellenname, wobei to_day...

Detaillierte Erklärung des Fischschwarm-Algorithmus im CocosCreator-Spiel

Vorwort Ich wollte vor kurzem CocosCreator lernen...

In wenigen Schritten zum einfachen Aufbau eines Windows-SSH-Servers

Das hier erwähnte SSH heißt Security Shell. Ich g...

Einführung in gängige XHTML-Tags

<br />Ich habe festgestellt, dass viele Leut...

Eine detaillierte Einführung in die Linux-Systemkonfiguration (Dienststeuerung)

Inhaltsverzeichnis Vorwort 1. Systemdienststeueru...

React Diff-Algorithmus-Quellcodeanalyse

Inhaltsverzeichnis Einzelner Knoten Diff Einzelel...

SQL-Implementierung von LeetCode (183. Kunden, die noch nie eine Bestellung aufgegeben haben)

[LeetCode] 183.Kunden, die nie bestellen Angenomm...

MySQL-Trigger-Verwendungsszenarien und Methodenbeispiele

auslösen: Trigger-Verwendungsszenarien und entspr...

Lösung für den ineffektiven Rand von in HTML verschachtelten Divs

Hier ist eine Lösung für das Problem, dass der Ra...

Einige Möglichkeiten zum Eliminieren doppelter Zeilen in MySQL

SQL-Anweisung /* Einige Methoden zum Eliminieren ...

Gründe und Lösungen für die Unfähigkeit, Array-Änderungen in Vue2 zu erkennen

Inhaltsverzeichnis Problemumgehung Warum kann ich...

Codebeispiel für das Nutzungsszenario der Nginx-Domänenweiterleitung

Szenario 1: Aufgrund von Serverbeschränkungen ist...

Zusammenfassung verschiedener Formen der Anwendung von CSS-Stilen in Webseiten

1. Inline-Stil, platziert in <body></body...

Einführung in die Verwendung des offiziellen MySQL-Leistungstesttools mysqlslap

Inhaltsverzeichnis Einführung Anweisungen Tatsäch...