Fixer Menübalken über der Seite

[Gunnar Bittersmann]

@@Rolf B

Das muss man nicht unbedingt, wenn man den Abstand einer Überschrift mit padding statt margin regelt.

Doch. Zu einen, weil du die Höhe des fixierten Headers i.d.R. nicht kennst. In meinem Beispiel weißt du nicht, ob „Land of Hope and Dreams“ in eine Zeile passt oder in 2, 3, … Du kannst also gar nicht wissen, wieviel Padding du da geben müsstest.

Zu anderen, weil es nicht nur Bereiche geht, die als seiteninterner Anker angesprungen werden können, sondern um sämtliche interaktiven Elemente.

Wenn du nicht gerade einen riesigen Bildschirm hast, solltest du in dem Beispiel den Button „All aboard!“ ohne Scrollen nicht sehen. Falls doch, zieh mal das Browserfenster kleiner.

Dann tabbe (Tastaturnavigation mit Tab-Taste) dich durch die Links durch. Ohne JavaScript würde so mitgescrollt werden, dass das fokussierte Element gerade so im Viewport ist, d.h. an der unteren Bildschirmkante – durch den fixierten Footer verdeckt. Beim Zurücknavigieren (Shift + Tab) wäre das fokussierte Element an der oberen Bildschirmkante durch den fixierten Header verdeckt.

Um das fokussierte Element in den sichtbaren Bereich zu bringen, brauchst du JavaScript.

Oder man scrollt nicht über die gesamte Viewporthöhe, sondern nur innerhalb des Bereichs zwischen fixiertem Header und fixiertem Footer – das sieht dann so aus.

LLAP 🖖