Fixierter Header mit Flexbox-Verfahren klappt nicht richtig

[Orlok]

Hallo

Beim onload wird vom header die Höhe ermittelt

window.onload = function() {
    document.getElementsByTagName('main')[0].style.top =
        document.getElementsByTagName('header')[0].offsetHeight + 'px';
}

Kein wirklich gutes Beispiel, wie du ja selbst schon angemerkt hast.

Anstelle des load-Events, das erst feuert, wenn wirklich alle Ressourcen vollständig geladen sind, sollte hier besser das DOMContentLoaded-Event als Einstiegspunkt genutzt werden.

Denn je nach Inhalt kann durchaus ein merklicher Zeitunterschied bestehen und Änderungen im Layout würden erst erfolgen, wenn die Seite bereits zur Anzeige gebracht wurde, was sich negativ auf die UX auswirken dürfte.

Um sicherzugehen, dass das Stylesheet zum Zeitpunkt des Event-Dispatch fertig geladen und angewandt ist, sollte das Script grundsätzlich am Ende von Body eingebunden werden.

Außerdem sollten Handlerfunktionen nicht als Objekteigenschaften hinterlegt, sondern als Callback der addEventListener-Methode übergeben werden.

Gerade wenn jemand noch nicht so vertraut ist mit JavaScript und den Tücken des Eventhandlings, ist denke ich die Gefahr sehr groß, dass der Eigenschaftswert überschrieben wird, da dem TO vielleicht einfällt, dass er noch ein paar mehr Funktionen ausführen möchte, wenn die Seite geladen ist.

Darum besser:

document.addEventListener('DOMContentLoaded', function ( ) {
      // ...
});

Oder:

var myCallback = function ( ) {
    // ...
};

document.addEventListener('DOMContentLoaded', myCallback);

Aber das weißt du ja selbst… ;-)

Gruß,

Orlok