Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid

So erhalten Sie Zugriff auf diesen Kurs

Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 23.200 Kurse von Branchenfachleuten.

Scrollen und dann stehen bleiben: "position:sticky" für die Navigation

Scrollen und dann stehen bleiben: "position:sticky" für die Navigation

Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid

Gratismonat starten Für Ihr Team erwerben

Scrollen und dann stehen bleiben: "position:sticky" für die Navigation

“

Ich möchte Ihnen jetzt "position: sticky;" zeigen. Und das ist eine Art Zwitter aus static und fixed. Es scrollt mit und bleibt dann an einer bestimmten Stelle stehen. Und das möchte ich Ihnen jetzt hier am Beispiel der Übungswebsite zeigen. Die Dateien aus dem Anfangsordner zu diesem Film sind in dem Übungsordner kopiert. Geöffnet sind index.html und navi-inline.css. Und in der Live-Vorschau sehen wir die Startseite. Die Navigation scrollt einfach mit aus dem Bild und ich möchte jetzt erreichen, dass sie zwar zunächst mitscrollt, dass sie aber stehen bleibt, wenn sie hier an den Bildschirmrand kommt. Und dazu gibt es, Sie ahnen es fest, "position: sticky;". .site-nav ist der Selektor für die Navigation hier. Und ich möchte jetzt hier die Positionierung einmal einrichten: "position: sticky;". So, da ist also hier bis jetzt überhaupt noch nichts passiert. Denn es gibt noch keine Bezugspunkte. Und der soll lauten "top: 0;". Das reicht schon, denn jetzt wird top, achten Sie einmal…

Inhalt