Wie erstelle ich ein Sticky Element mit CSS und HTML

von | Jun 15, 2022 | Allgemein | 0 Kommentare

Inhaltsverzeichnis

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;
}

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht.