StickyActions

Überblick

mmm-sticky-actions-header und mmm-sticky-actions-footer fixieren Aktionsleisten am oberen oder unteren Rand eines Scrollcontainers, sobald deren ursprüngliche Position verlassen wird.

Subkomponenten

• mmm-sticky-actions-header
• mmm-sticky-actions-footer

Inputs

mmm-sticky-actions-header

Input	Typ	Beschreibung
top	number	Oberer Offset in Pixeln
elevateOnStick	boolean	Aktiviert Sticky-Verhalten
scrollContainer	string	Optionaler CSS-Selector für expliziten Scrollcontainer

mmm-sticky-actions-footer

Input	Typ	Beschreibung
alwaysStuck	boolean	Erzwingt immer festen Zustand
bottom	number	Unterer Offset in Pixeln
elevateOnStick	boolean	Aktiviert Sticky-Verhalten
scrollContainer	string	Optionaler CSS-Selector für expliziten Scrollcontainer

Outputs

Die Komponenten definieren aktuell keine eigenen Outputs.

SCSS-Variablen

Header

• --mmm-sticky-actions-header-padding-block
• --mmm-sticky-actions-header-gap
• --mmm-sticky-actions-header-inner-padding-block
• --mmm-sticky-actions-header-background
• --mmm-sticky-actions-header-border-color
• --mmm-sticky-actions-header-shadow

Footer

• --mmm-sticky-actions-footer-padding-block
• --mmm-sticky-actions-footer-gap
• --mmm-sticky-actions-footer-inner-padding-block
• --mmm-sticky-actions-footer-background
• --mmm-sticky-actions-footer-border-color
• --mmm-sticky-actions-footer-shadow

Hinweise

• Die Komponenten suchen automatisch nach einem geeigneten Scrollcontainer, wenn keiner explizit angegeben ist.
• Geometrie und Sticky-Zustand werden über ResizeObserver und requestAnimationFrame nachgeführt.
• Die eigentlichen Actions werden als Inhalt projiziert.

Beispiel

<mmm-sticky-actions-header>
  <button type="button">Header Action</button>
</mmm-sticky-actions-header>

<mmm-sticky-actions-footer>
  <button type="button">Abbrechen</button>
  <button type="button">Speichern</button>
</mmm-sticky-actions-footer>

Header Action

Scrollbereich fuer Sticky-Actions-Demo.

AbbrechenSpeichern