/* ========================================================================= MM Sticky-Header – Kopfleiste im geklebten Zustand Gehört zu assets/js/mm-sticky-header.js. Das Skript setzt „is-sticky" an .header-nav, sobald deren Ruheposition den oberen Bildschirmrand erreicht; hier steht nur, was dieser Zustand ändert. Eingeschaltet wird nichts extra: Ohne .header-nav auf der Seite legt das Skript keinen Merker an, ohne .sticky-logo greift keine Regel. --- Stellschrauben ----------------------------------------------------- --mm-sticky-logo-breite Logobreite im geklebten Zustand (:root) --mm-sticky-logo-flusshoehe freigehaltener Logoplatz (siehe unten) --mm-sticky-uebergang Dauer des Übergangs Die Logobreite steht bewusst an :root, also auf der höchsten Ebene: Sie ist die Stellschraube, die im Projekt tatsächlich verstellt wird, und von dort aus erreicht sie jede Stelle – Elementors globales „Individuelles CSS" der Website-Einstellungen, das Kit oder ein Theme können sie setzen, ohne den Kopfleisten-Container zu treffen. Weil :root die äußerste Ebene ist, gewinnt jede spätere Angabe an .header-nav trotzdem gegen sie; das gezielte Überschreiben einer einzelnen Kopfleiste bleibt also möglich. Die beiden anderen bleiben an .header-nav: Sie beschreiben Innereien dieser Kopfleiste (freigehaltener Platz, Übergangsdauer) und haben außerhalb davon keine Bedeutung. --- Spezifität --------------------------------------------------------- Die Ausgangsbreite (100px) kommt aus Elementors Bild-Widget. Dessen generiertes CSS schreibt „.elementor-NNN .elementor-element.elementor- element-NNN img" (0-3-1) – unser Selektor käme mit einfacher Klasse auf denselben Wert, und ein Gleichstand entscheidet sich über die Ladereihenfolge, die bei bedarfsweise geladenem Widget-CSS nicht verlässlich ist. Deshalb steht .sticky-logo doppelt: gleiche Elemente, 0-4-1, gewinnt unabhängig von der Reihenfolge. Dasselbe Mittel wie in mm-tabs.css gegen Elementors Widget-CSS. Die Ausgangsbreite selbst wird bewusst NICHT gesetzt: Sie gehört ins Bild-Widget, wo sie auch eingestellt wurde. Hier steht nur der zweite Zustand, sonst lägen dieselben Maße an zwei Orten. ========================================================================= */ :root { --mm-sticky-logo-breite: 70px; } .header-nav { /* Höhe des Logos bei voller Breite – hält seinen Platz im Fluss frei. */ --mm-sticky-logo-flusshoehe: 56px; --mm-sticky-uebergang: 0.3s; } /* --- Warum der Logoplatz im Fluss festgehalten wird --------------------- Ohne das wackelt beim Hochscrollen das ganze Seitenlayout: Elementor nimmt das „fixed" weg, sobald die Ruheposition erreicht ist, aber der Übergang des Logos läuft dann noch. Die Leiste steht in diesem Moment wieder im Fluss und ist um die fehlende Logohöhe zu flach. Gemessen am Elemente-Board: Dokumenthöhe fällt von 8878 auf 8862 und wächst über 300 ms zurück. Festgehalten wird der Platz des Logos, nicht die Höhe der Leiste. Der Bildrahmen ist „display: block" und exakt so hoch wie das Bild – er allein trägt die Logohöhe in den Fluss. Bleibt er konstant, kann die Logobreite die Leiste nicht mehr bewegen, und der Übergang darf in beide Richtungen weich laufen. Der Unterschied ist nicht kosmetisch: Die Ruhehöhe der Leiste hängt am Breakpoint (gemessen 75,7 px am Desktop, 95,7 px bei 390 px Breite) – eine dort verankerte Zahl greift auf der jeweils anderen Breite nicht. Die Ruhehöhe des Logos ist überall dieselbe, weil das Bild-Widget überall mit 100 px Breite steht. min-height statt height: Wird das Logo im Widget größer eingestellt, wächst der Rahmen mit, statt es abzuschneiden – die Zahl unten ist dann wirkungslos, nicht falsch. Der Rahmen bekommt Flex, weil er sonst „display: block" bliebe und das geschrumpfte Bild oben in einem zu hohen Kasten hinge statt mittig. Angenommen ist dabei ein linksbündiges Logo (Ist-Zustand: text-align start); steht es in einem anderen Projekt mittig, gehört hier justify-content: center dazu. */ .header-nav .sticky-logo.sticky-logo { display: flex; align-items: center; min-height: var( --mm-sticky-logo-flusshoehe ); } /* Im geklebten Zustand wird der Platz wieder freigegeben – sonst bliebe die Leiste so hoch wie in Ruhe und würde nie kompakter (gemessen 75,7 px → 59 px am Desktop, 95,7 px → 79 px bei 390 px Breite). Das ist hier gefahrlos, weil die Leiste dann „fixed" ist und den Fluss nicht mehr anfasst. Ohne Übergang, also hart: Der Wechsel ist nur in dem Moment sichtbar, in dem die Leiste ohnehin herausgelöst wird. Dass kurz beides zugleich gälte – im Fluss stehend und schon freigegeben –, verhindert die Reihenfolge der Auslöser: Beim Hochscrollen verschwindet die Klasse bei scrollY 40, Elementor löst das „fixed" erst bei 36. Der Platz ist also zurück, bevor die Leiste in den Fluss zurückkehrt. Wer den rootMargin in mm-sticky-header.js verschiebt, muss diese Reihenfolge erhalten. */ .header-nav.is-sticky .sticky-logo.sticky-logo { min-height: 0; } /* Die Merker des Skripts: Der eine markiert die Ruheposition der Kopfleiste, der andere den Anfang des Dokuments. Beide dürfen selbst nichts verschieben – der negative Außenabstand nimmt ihre eigene Höhe wieder zurück. Ein Pixel statt null, weil ein Element ohne Höhe je nach Umgebung aus dem Fluss fällt und dann nichts mehr markiert. */ .mm-sticky-merker, .mm-scroll-merker { height: 1px; margin-bottom: -1px; pointer-events: none; } /* Der Übergang gehört in den Ruhezustand, nicht in den geklebten: Stünde er nur unten, liefe das Logo beim Schrumpfen weich und spränge beim Zurückscrollen hart auf seine Ausgangsbreite. */ .header-nav .sticky-logo img { transition: width var( --mm-sticky-uebergang ) ease; } .header-nav.is-sticky .sticky-logo.sticky-logo img { width: var( --mm-sticky-logo-breite ); } @media ( prefers-reduced-motion: reduce ) { .header-nav .sticky-logo img { transition: none; } }