(Durchschnitt: 5,00 von
5 –
3
Stimme(n)) - Fehler: Nicht angemeldet!
Loading...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.
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.
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.
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.
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=”fixed”>Menu!</div> <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. 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. </body> |
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>
<div class=”logo”>Logo</div> <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. 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. </body> |
