im CSS ein sticky Element auf Bildschirmhöhe?
Ich arbeite gerade an einer Website, wobei ich mit einem CSS-Grid die Bereiche header, nav, footer und main definierte. Mein nav ist dabei auf der rechten Seite des Bildschirms und nimmt 15% der Breite ein. Es sollte sticky sein, da es nur aus 4 Bildern besteht, welche immer zu sehen sein sollten. Dies habe ich schon so. Nun ist das Problem, dass wenn ich scrolle, die Bilder nach oben scrollen, anstatt dort zu bleiben. (Das nav ist so zu sagen zu lang und danach kommt einfach nur noch die Hintergrundfarbe des nav). Wie kann ich machen, dass es eigentlich 100% der Höhe des Bildschirms einnimmt und dann so bleibt?
Seite beim Öffnen
Seite beim bisschen runter scrollen (so sollte es schlussendlich beim weiterscrollen auch sein)
Seite beim noch weiterscrollen
1 Antwort
Du beschreibst es ja schon korrekt als "sticky Element", und genau das ist auch der wichtigste Teil des CSS-Codes: `position: sticky`;
Hier gibt es bei CSS-Tricks ein Codepen mit so einem Fall. Lass dich nicht von den vielen Styles dort irritieren, wichtig ist nur der äußerste Wrapper vom Container
https://css-tricks.com/a-dynamically-sized-sticky-sidebar-with-html-and-css/
.sidebar {
position: sticky;
top: var(--offset); // oder auch: top: 0;