[Gothicforum]

Ich habe mir ein Hamburger-Menü gecodet.

Da ist eine Checkbox und wenn man die Checkbox an-checked, dann geht der Inhalt der Seite 800px nach unten und es wird eine Nav-Leiste offenbart, die die ganze Zeit im Hintergrund war und die 100vh hoch ist, also den ganzen Screen einnimmt.

Aber man kann dann immer noch nach unten scrollen und den Rest der Seite angucken, während aber die Position des Headers und der Nav-Leiste fix ist. Das sieht komisch aus.

Ich möchte, dass, wenn die Checkbox gecheckt ist und man also die Nav-Leiste sieht, man dann nciht mehr nach unten scrollen kann.
Ich würde vermuten, dass man das vielleicht mit "overlay: hidden" machen kann, oder so? Aber ich weiß nicht, wo das hin muss.

Oder wie kann man verhindern, dass der User auf der ganzen Seite nach unten scrollen kann?

[Gothicforum]

Und kann ich es machen, dass der Header
position: relative (oder so) ist, also beim Scrollen wie der Rest der Seite hoch geht,
aber wenn man den Haken bei der Checkbox setzt,
dann ist die Position vom Header absolute,
sodass dann beim Scrollen der Header immer oben am Rand bleibt?

[Progrinator]

Ja kann man fixen. Ich glaube mit Position: Absolut würde mich aber nicht drauf fest nageln.

[Gothicforum]

ja, aber wie verbinde ich das mit der checkbox?

[Tray]

Mit JavaScript.

Setze den Body overflow:hidden wenn die Checkbox angehackt wurde.

Beispiel mit JQuery

https://jsfiddle.net/pozc3hky/