Versionen dieses Beitrags

Fixer Menübalken über der Seite

Gb 80x80 Gunnar Bittersmann
  • Fixer Menübalken über der Seite
  • @@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](https://codepen.io/gunnarbittersmann/pen/qvrKRV) weißt du nicht, ob *„Land of Hope and Dreams“*{:@en} 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!“*{:@en} 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 fokussierte Element an der oberen Bildschirmkante durch den fixierten Header verdeckt.
  • 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.](https://codepen.io/gunnarbittersmann/pen/JzyQmp)
  • LLAP 🖖
  • --
  • *„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann