HTML, CSS Menüleiste oben fixieren?
Hallo zusammen,
ich hab die Menüleiste oben wo die links drauf sind auf der Webseite fixiert sodass wenn ich scrolle sich nur der Hauptbereich bewegt und die Menüleiste bleibt oben.
Wie kann ich machen dass wenn ich auf ein Seiteninternen Link klicke dass dann die Seite erst unter der Menüleiste anfängt nicht ganz oben hinter der menüleiste?
Vielen Dank!
3 Antworten
Während `position: fixed` zwar funktioniert, hast du selbst schon das Problem davon gesehen: fixierte Positionierung nimmt das Element aus dem Document-flow und es nimmt keinen Platz mehr darin ein. Dadurch "rutschen" die darauf folgenden Elemente nach und die Navigationsleiste verdeckt den Anfang der Webseite.
Dieses Problem kannst du ganz einfach umgehen, indem du
position: sticky;
top: 0;
verwendest. Sticky Positionierung verhält sich zunächst ganz gewöhnlich und die Navigationsleiste nimmt ihren Platz am Anfang der Seite ein. Scrollt man allerdings runter, bleibt sie am oberen Rand (top: 0) kleben (sticky). Jetzt verhält sie sich so wie mit `position: fixed`.
Um darüber hinaus das Problem mit Sprungmarken (also Verlinkungen auf eine bestimmte Id auf der selben Seite via #id) zu lösen, kannst du
scroll-margin-top: ...;
z.B. zum entsprechenden Element mit der Id hinzufügen. "..." dabei natürlich mit der Höhe deiner Navigationsleiste ersetzen. Mehr dazu findest du hier: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin
du musst position von topbar fixed machen und den gesamten content margin top geben
Achso das ist ja auch wie bei der anderen Antwort, das klappt bei internen Verlinkung nicht wenn jemand da drauf klickt
in css mit "fixed"
Ja das habe ich probiert, das klappt auch mit allem außer wenn ich auf einen seiteninternen Link klicke dann fängt die Seite ganz oben wieder an dann ist der obere Teil hinter der Menüleiste versteckt und man muss wieder bisschen zurück scrollen um alles zu sehen
Ok danke ich Versuchs morgen dann, jetzt bin ich unterwegs