Heute möchte ich euch zeigen wie ihr sein sehr spannendes Element für eure Webseite machen könnt, welches man leider nur sehr selten sieht. Und zwar heisst dieses Element „Sticky Element“ – wie „klebriges Element“. Es ist ein Bereich eines Textes der irgendwo unten im Text positioniert ist, und wenn man darüber runterscrollt, dann bleibt er oben im Browserfenster kleben und man kann runter scrollen. Scrollt man dann aber wieder hoch und erreich die Original Position des Elements, dann lässt das Element los und man kann weiter nach oben scrollen.
Klingts kompliziert?
Ist es aber gar nicht.
Mir gefallen solche Effekte für Texte wo etwas wichtiges drin ist – wie zb Lerninhalte wo die Formel dann oben bleibt.
Video
HTML
1 2 3 4 5 6 7 | <div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="sticky">
I will stick to the screen when you reach my scroll position
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div> |
CSS
1 2 3 4 5 6 7 8 9 10 | .sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: #fca311;
padding: 50px;
font-size: 20px;
margin-top: 50px;
margin-bottom: 50px;
} |
Hallo,
besten Dank für die Information, ich probiere gerade Tabellen-Header als Sticky Element zu realisieren und komme nicht ganz zurecht. Es möchte mit position: sticky; noch nicht funktionieren, in einem anderen Blog habe ich gelesen, dass es für dieses Element auch Browserabhängigkeiten gibt…
Das Video ist sehr gelungen, weiter so. Ich werde mir mal die anderen Beiträge hier anschauen. 🙂 Da kann ich wohl noch einiges lernen!
Beste Grüße
Mauritz