Fixer Menübalken über der Seite

[user4711]

Da muss man mit JavaScript ran: Element.scrollIntoRestrictedView() Was auch heißt, Header/Footer erst mit JavaScript zu fixieren.

Eine Frage eines Anfängers hierzu: Wie bekomme ich mein Header-Element nun dazu, auch fixiert zu bleiben? Wenn ich dein JS aus deinem Beispiel in meine Seite einbinde und mein CSS entsprechend deinem Beispiel anpasse (... :root[data-scroll-into-restricted-view-enabled] header ...), dann tut sich nichts - der Header scrollt weiterhin mit.

Im Übrigen verstehe ich auch dein CSS nicht wirklich; :root ist klar, aber was hat es mit den eckigen Klammern auf sich? In der W3-Spezifikation finde ich hierzu nichts. Könntest du hierzu (jedenfalls für mich) etwas Licht ins Dunkel bringen?