Ziel der Sprungmarke unter Sticky Menu

[marctrix]

Hej Gunnar,

@@marctrix

Auf einer Seite (one pager) mit einem Menü, das oben an der Seite fest steht, möchte ich an bestimmte Stellen springen können. Wenn ich ein Ziel mit #foo springe, landet das Ziel am oberen Rand des Viewport und die Überschrift "foo" ist nicht zu sehen, weil vom Menü überdeckt.

Hat jemand eine Idee, wie ich das vielleicht mit CSS hinbekomme?

body { height: 100vh } und das main-Element scrollbar machen (aber nur, wenn genügend Höhe vorhanden ist).

☞ Beispiel

Die Scrollbar geht dann nicht über die gesamte Viewporthöhe, was ja auch korrekt ist.

Sehr schöne Idee! - Vielen Dank. Muss bei mir noch ein bisschen tüfteln, weil das HTML nicht so schön ist (immerhin gibt es einen header und ein div als einzige Kinder eines Containers). Es klappt zwar, aber beim Scrollen markiert man alles im div nach dem header (das Menü ist nicht mehr sticky – ich kann fremden Code nicht leiden. Keiner arbeitet so sauber, dass es Spaß macht damit zu arbeiten)…

Aber nicht dein Problem, die Idee war erst einmal entscheidend!

Marc