Sticky

Tape Sticky paper

Die CSS-Eigenschaft position: sticky ermöglicht es, Block-Elemente je nach Scroll-Position statisch oder fixiert anzuzeigen. Das Menü dieser Seite wird als Sticky Menu angezeigt.

Demo

In der nachfolgenden Box scrollen um den Effekt zu sehen:

Über dem sticky Bereich

Solange die scrollbar ganz oben ist wird der als position: sticky formatierte Bereich als postiton: static angezeigt. Sobald man so weit nach unten scrollt, dass der sticky-Bereich an die obere Kante stößt, bleibt er dort „kleben“ (position: fixed).

Sticky Header

dancing cat

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Code

div {
    position: sticky;
    top: 0;
}

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.