hallowebsite Sticky Header for Kadence

Überblick

hallowebsite Sticky Header for Kadence lässt dich einen mehrzeiligen Header aus Kadence-Blöcken bauen und pro Zeile festlegen, was klebt, was beim Runterscrollen verschwindet und was wegscrollt. Gesteuert wird alles über CSS-Klassen im Block-Editor – kein Einstellungs-Dschungel. Das Plugin ergänzt nur Verhalten und Positionierung; Farben, Schatten und Blur bleiben in deinem Theme-CSS. Dasselbe System funktioniert auch für Sticky-Zeilen im Seiteninhalt, etwa Filterleisten oder Tabs, die sich exakt unter dem sichtbaren Header einreihen.

Funktionen

• Beliebig viele Sticky-Zeilen, die sich sauber untereinander stapeln.
• Modi pro Zeile: immer sichtbar, beim Scrollen ausblenden, beim Hochscrollen wieder einblenden.
• Inhalts-Bereiche: Sticky-Zeilen im Seiteninhalt, die unter der aktuellen Header-Unterkante sitzen.
• Automatische Zustandsklassen (is-stuck, is-hidden, is-visible) zum Gestalten.
• Natives CSS-Sticky für Inhaltszeilen – kein Springen beim Andocken.
• Getrennte z-index-Ebenen, damit Inhaltszeilen nie den Header verdecken.
• Abwärtskompatibel mit der alten Klasse sticky-header.

Einrichtung in Kadence

1. Den Header in einem Kadence-Spaltenlayout (Row Layout) bauen. Als HTML-Tag möglichst header setzen.
2. Dem äußeren Header-Block die Klasse hw-header geben.
3. Darin mehrere Zeilen anlegen.
4. Jede Zeile, die kleben soll, bekommt hw-sticky-row plus eine Modus-Klasse.
5. Zeilen ohne hw-sticky-row scrollen ganz normal weg.

Klassen-Referenz

Klasse	Wo	Wirkung
hw-header	Äußerer Header-Block	Bezugs-Wrapper für den gesamten Header.
hw-sticky-scope	Äußerer Inhaltsbereich	Bezugs-Wrapper für Sticky-Zeilen im Seiteninhalt.
hw-sticky-row	Innere Zeile	Die Zeile wird sticky und stapelt sich unter vorherigen Sticky-Zeilen.
hw-always-visible	Sticky-Zeile	Bleibt immer sichtbar.
hw-hide-on-scroll	Sticky-Zeile	Verschwindet beim Runterscrollen und kommt oben wieder.
hw-reveal-on-scroll	Sticky-Zeile	Verschwindet beim Runterscrollen und kommt beim Hochscrollen sofort zurück.
hw-no-shadow	Sticky-Zeile	Entfernt den Sticky-Schatten.
hw-normal-row	Jede Zeile	Nur eine optionale Markierung – Zeilen sind ohnehin normal.

Beispiele

Header mit drei Ebenen
  Header-Block:  hw-header
  Zeile 1 Logo:  hw-sticky-row hw-always-visible
  Zeile 2 Menü:  hw-sticky-row hw-hide-on-scroll
  Zeile 3 Sub:   hw-sticky-row hw-always-visible

Sticky-Filterleiste im Inhalt
  Bereich:       hw-sticky-scope
  Filterleiste:  hw-sticky-row hw-always-visible
  Tabs:          hw-sticky-row hw-reveal-on-scroll

Gestaltung

Optische Styles in Design → Customizer → Zusätzliches CSS ergänzen – am besten mit deiner Kadence-Palette:

:root {
  --hw-sticky-top: 0px;
  --hw-sticky-z: 9999;
  --hw-header-z: 100000;
  --hw-content-sticky-z: 9000;
  --hw-sticky-speed: .35s;
}
.hw-sticky-row.is-stuck {
  background: var(--global-palette9);
  box-shadow: 0 8px 28px rgba(0,0,0,.08);
}

Hinweise

• Die vollständige Anleitung findest du unter Einstellungen → Flexible Sticky Header.
• Gibt es keine inneren Sticky-Zeilen, verhält sich der ganze Header wie ein Header mit „beim Scrollen ausblenden“.

Changed:
- Rebranding: neuer Name „hallowebsite Sticky Header for Kadence“, Autor hallowebsite, Plugin-URI https://hallowebsite.de/plugins/sticky-header-for-kadence/
- Keine funktionalen Änderungen.