Position:fixed und sticky: Menü + Logo im Browser mit CSS fixieren

9 Leser haben sich bedankt

(Durchschnitt: 5,00 von 5 – 3 Stimme(n)) - Fehler: Nicht angemeldet!

Mit einem kleinen Trick lassen sich Elemente einer Webseite nur mit CSS fest definieren: dann bleiben sie auch beim Scrollen fest an ihrer Position und bewegen sich nicht mit – das ist ideal für eine schmale Menüleiste, die immer sichtbar sein soll.

position:fixed

Mit dem Befehl “position:fixed” wird ein Element absolut platziert, allerdings mit dem Unterschied zu “position:absolute”, dass es auch fest an seiner Position bleibt. Scrollt man auf der Seite nach unten, bleibt das fix definierte Element weiterhin auf seiner Position: Das ist dann sinnvoll, wenn man nur einen schmalen Menü-Bereich hat, der immer sichtbar bleiben soll. Ein mit “position:absolute” definiertes Element bleibt nicht auf der Position, sondern scrollt mit dem Rest der Seite mit.

position:sticky

Anders als “position:fixed” ist ein als sticky positioniertes Element nicht zwingend direkt zu sehen sondern kann auch erst später, beim scrollen sichtbar werden. Anstatt aber weiter mit der Seite aus dem Bild zu scrollen, bleibt es bei weiterem Scrollen fest an der definierten Position stehen und bewegt sich nicht mehr weiter mit. Damit das klappt, muss es aber noch eine weitere Positionsangabe gegeben werden: zum Beispiel “top:5px”. Dies sorgt dafür, dass das Element am Ende 5 Pixel unter dem oberen Seitenrand stehen.

Unterschiede zwischen fixed und sticky

Während ein als “fixed” markiertes Element also von Beginn an immer sichtbar ist, ganz so, als wäre es absolut positioniert, kann das sticky-Element erst später in den sichtbaren Bereich kommen. Dafür ist die Unterstützung noch nicht so gut wie bei einem fixed Element: Für den Safari sollte man daher immer noch den browserspezifischen Zusatz ergänzen:

position: -webkit-sticky;

Eine Navigationsleiste kann daher sowohl als sticky als auch als fixed definiert werden – oder auch durch die Verwendung von mehreren Sichtbarkeitsebenen mit dem Attribut “z-index” mit einer Kombination aus beidem.

Beispiele für position:fixed und position:sticky

Hier die beiden Quellcodes für die Beispiele oben: Links die position:fixed Variante, bei der das Menü die ganze Zeit oben stehen bleibt, rechts die position:sticky Variante, bei der das Menü zunächst mitscrollt, bis der Wert von “top” erreicht ist (hier: 0px). Abschließend bleibt auch das Sticky Menü fest an seiner Position.

position:fixed

<html>
<head>
<style type=”text/css”>
body { margin:0; padding:0; font-family: arial; overflow:scroll; font-size:13px; }
.fixed {
position:fixed;
top:0px;
left:0;
right:0;
padding:5px;
background-color:#ABCAF1;
}
.text { margin:30px 15px 15px 15px; }
</style>

<body>

<div class=”text”>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br><br>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<br><br>

</body>
</html>

position:sticky

<html>
<head>
<style type=”text/css”>
body { margin:0; padding:0; font-family: arial; overflow:scroll; font-size:13px; }
.fixed {
position: -webkit-sticky;
position:sticky;
top:0px;
margin-top:26px;
padding:5px;
background-color:#ABCAF1;
}
.logo {
position: absolute;
top:0px;
left:0px;
right:0px;
padding:5px;
height:15px;
background-color:#6D8FBB;
border-bottom:1px solid #5F7FA8;
}
.text { margin:30px 15px 15px 15px; }
</style>

<body>

</body>
</html>

Fragen zu diesem Tipp? In unserem Webmaster-Forum helfen wir weiter!

Das könnte Sie auch interessieren:

» Top Tipps: Diese Tipps sind heute beliebt

datenschutz (34x gelesen)
windows-beschleunigen (31x gelesen)
windows-schneller-starten-autostart-aufraeumen (24x gelesen)
pc-einsteigerkurs (14x gelesen)
pc-einsteigerkurs-3-2 (6x gelesen)

Mehr Tipps zu Position:fixed und sticky: Menü + L...

Lorem Ipsum Generator
"Lorem ipsum dolor sit amet, consectetuer adipiscing elit." Diesen Text kennt jeder, der für Print- oder Onlineprodukte schon einmal Testlayouts gesehen hat. Als Standard-Fülltext soll...
Windows: Testseite drucken – so testet man den Drucker!
Mit dem Drucken einer Testseite lässt sich schnell prüfen, ob der Drucker richtig angeschlossen ist und der Treiber erkannt wird. Außerdem sieht man, ob alle...
YouTube testet Download
Konnten bisher Videos auf YouTube nur mit speziellen Methoden als Flashdatei auf den Rechner heruntergeladen werden, so testet YouTube derzeit bei einigen ausgewählten Videos die...
Webmaster: Element im Druck nicht anzeigen (visibility: hidden)
Wer Webseiten ausdrucken möchte, braucht oft nicht alle Elemente. Mit Media-Queries lassen sich verschiedene Layouts und Designs für verschiedene Medien erstellen: Vom Desktop-Bildschirm über das...
Randgenau Positionierung am Browserfenster
Wenn man Text oder Bilder direkt am linken Browserrand beginnen lassen möchte, muss man zuerst den Standard-Browserrand ausschalten. Dies funktioniert mit den allerdings veralteten Attributen...
macOS: Apple Menüleiste + Dock auf jedem Bildschirm
Die Apple Menüleiste auf allen Monitoren oder nur dem Haupt-Bildschirm? So stellt man das ein! Seit macOS "Mavericks" hatte Apple eine praktische Funktion dabei: Wer...

Ähnliche Fragen: