WordPress

Allgemein

Technik

Design

Konzept

WordPress Plugins

Interessantes

Vermarktung

Themen

Font / Schriften

Social Media

Youtube

eCommerce

Gemischtes

Kolumne

Webinar

Blog Archiv

Kurse / Webinare

Meine nächste Webinare / Kurse

Wie erstelle ich ein Sticky Element mit CSS und HTML

von | Jun 15, 2022 | Allgemein | 1 Kommentar

Schlagwörter: CSS - CSS3

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




1 Kommentar

  1. Mauritz

    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

    Antworten

Einen Kommentar abschicken

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