coastdigitalgroup/coastai-skills

Sticky- und Floating-UI-System

Zweck

Das Sticky- und Floating-UI-System bietet eine Methodik zur Gestaltung persistenter, viewport-verankerter und scroll-responsiver Oberflächenkomponenten. Es stellt sicher, dass kritische Steuerelemente – wie die primäre Navigation, conversionssteigernde Call-to-Actions (CTAs), kontextbezogene Utility-Widgets und Schnellaktions-Buttons – auch beim aktiven Scrollen leicht zugänglich bleiben.

Ein gut gestaltetes Sticky- und Floating-System löst die räumliche Spannung zwischen sofortiger Aktionsverfügbarkeit und primärem Konsum von Inhalten. Es verhindert Layout-Ermüdung, schützt den Viewport vor übermäßiger visueller Überladung, berücksichtigt mobile physische Safe Areas (wie Geräte-Notches und systemeigene Home-Indikatoren) und mildert streng die WCAG 2.2 SC 2.4.11 (Fokus nicht verdeckt).

Anwendungsfälle

• Progressive Navigationskopfzeilen: Kopfzeilen, die beim Scrollen nach unten ausgeblendet werden (maximierung des Lesebereichs) und beim Scrollen nach oben wieder erscheinen (sofortige Navigation verfügbar).
• Mobile persistente untere Docks: Schwebende oder angedockte untere Leisten mit primären Conversion-Aktionen (z. B. "In den Warenkorb", "Jetzt buchen", "Bewerben") für mobile Layouts.
• Klebrige Sidebar-Widgets: Kontextbezogene Subnavigation, Sharing-Leisten oder Produktkonfigurationen, die mit dem Hauptinhaltsbereich scrollen, aber vor Erreichen struktureller Grenzen einrasten.
• Schwebende Aktionsbuttons (FABs): Viewport-verankerte Auslöser für schnelle, häufig durchgeführte Aktionen, wie "Zurück nach oben"-Navigation, direkte Support-Chats oder Warenkorb-Schubladen.
• Anker- und Lesefortschrittsbalken: Klebrige Elemente, die die Viewport-Completion-Rate verfolgen oder direkte Links zu Unterabschnitten der Seite bieten.

Wann NICHT verwenden

• Datendichte SaaS-Dashboards: Wenn der Bildschirmplatz stark durch tabellarische Daten, Arbeitsflächen oder viewport-gesperrte Panels eingeschränkt ist; verwenden Sie dashboard-layout-system.
• Kurze Seiten / Ein-Viewport-Seiten: Wenn der gesamte Seiteninhalt in eine einzige Bildschirmansicht passt und ohne Scrollen aufgerufen werden kann.
• Narrative, experimentelle Websites: Wenn eine absichtliche visuelle Desorientierung oder ein immersiver 3D-Raumfluss gegenüber der üblichen Navigationsfunktionalität gewählt wird.
• Tastaturfokussierte Formulare: Überladung von Seiten mit mehrfeldrigen Formularen mit Sticky-Buttons, die aktive Eingabefelder auf mobilen virtuellen Tastaturen überlappen und abdecken.

Eingaben

1. Inhalts- und Narrativstruktur: Der Wireframe-Ablauf der Seite (aus section-composition-system), um zu verstehen, wann und wo Sticky-Elemente aktiviert werden sollen.
2. Viewport-Einschränkungen des Geräts: Zielmobile, Tablet- und Desktop-Breakpoints, um Layouts zwischen angedockten Leisten und schwebenden Seitencontainern anzupassen.
3. Primäre und sekundäre CTAs: Identifizierung der Conversion-Ziele, die eine dauerhafte Sichtbarkeit erfordern.
4. Z-Index-Stacking-Strategie: In elevation-and-depth-system festgelegte Stacking-Beziehungen und -Ebenen, um visuelle Überlappungskonflikte zu vermeiden.
5. System-Safe-Area-Metriken: Hardware-Safe-Area-Insets (env(safe-area-inset-bottom), Notches), die erforderlich sind, um Überschneidungen mit der Geräte-Chrome zu vermeiden.

Ausgaben

1. Sticky-Verhaltensspezifikation: Explizite Definitionen von Scroll-Triggern, Animationsschwellen und Ein-/Ausgangs-Übergangsformeln.
2. Layout für mobiles unteres Dock: Räumlich optimierte Layout-Blueprints für Mobilbildschirme mit detaillierten Zielgrößen, Safe-Area-Offsets und Kontrastanforderungen.
3. Verdeckungsminderungsplan: Design-Definitionen, die zeigen, wie Sticky-Overlays fokussierte Elemente nicht blockieren (WCAG 2.2 SC 2.4.11).
4. Desktop-Sidebar/Widget-Sperrspezifikation: Grenzregeln (Kopfzeilen, Fußzeilen, Abschnittsendpunkte), an denen scrollende Seitenelemente einrasten und gesperrt werden müssen.

Workflow

1. Viewport-Zonierung und räumliche Budgets festlegen

Bevor persistente Ebenen positioniert werden, definieren Sie die "Visuelle Sicherheitszone", um die Lesbarkeit des Inhalts zu gewährleisten.

• Die 15%-Budgetregel: Sticky-Elemente dürfen niemals mehr als 15% der gesamten vertikalen Viewport auf einem beliebigen Gerätebildschirm belegen.
• Z-Index-Zuweisung: Weisen Sie klare Stacking-Werte unter Verwendung der Ebenen von elevation-and-depth-system zu.
  • Progressive Kopfzeilen: z-index: 100 (Ebene 3: Sticky)
  • Mobile untere Docks: z-index: 150 (Ebene 3: Sticky / Floating)
  • Schwebende Aktionsbuttons: z-index: 200 (Ebene 3: Floating-Trigger)
• Gestapelte Überlappung vermeiden: Lassen Sie niemals zu, dass eine Sticky-Kopfzeile und eine Sticky-Fußzeile gleichzeitig statisch bleiben, wenn sie den Bildschirm überladen. Stellen Sie sicher, dass sie genügend Freiraum haben oder sich in bestimmten Zuständen ausblenden.

2. Progressives Kopfzeilenverhalten entwerfen

Eine statische Sticky-Kopfzeile belegt wertvolle vertikale Pixel. Implementieren Sie ein "Progressives" Modell:

• Standardzustand: Transparente oder integrierte Kopfzeile, die dem Seitenhintergrund entspricht.
• Scrollen nach unten (Schwelle >100px): Übersetzen Sie die Kopfzeile sanft nach oben aus dem Sichtfeld (transform: translateY(-100%)), um den Bereich zum Scannen von Inhalten zu maximieren.
• Scrollen nach oben (Delta >15px): Übersetzen Sie die Kopfzeile sofort oder sanft zurück in den sichtbaren Bereich, wobei eine feste oder unscharfe Oberfläche (backdrop-filter: blur(8px)) mit einem subtilen Schatten angewendet wird, um die Trennung vom Seitenkörpertext anzuzeigen.
• Grenzstopp: Deaktivieren Sie den Scroll-up-Übergang, sobald die Bildlaufleiste an den oberen Rand des Viewports zurückkehrt (scrollY < 50px), und setzen Sie die Kopfzeile auf ihr ursprüngliches statisches Layout zurück.

3. Mobiles persistentes unteres Dock entwickeln

Persistente untere Leisten sind wichtige Treiber für mobile Conversion, aber sie sind stark anfällig für physische und visuelle Interferenzen.

• Physische Safe Areas: Verankern Sie die untere Kante des Docks immer mit CSS-Umgebungsvariablen: padding-bottom: calc(var(--base-padding) + env(safe-area-inset-bottom)). Dadurch wird sichergestellt, dass es sauber über dem iOS Home-Indikator und den Android-Navigationsleisten sitzt, ohne interaktive Trigger zu überlappen.
• Scroll-auslösender Eintritt: Zeigen Sie das mobile untere Dock nicht im anfänglichen Hero-Viewport an. Warten Sie, bis der Benutzer über den Inline-CTA des Hero-Bereichs hinaus gescrollt hat (Schwelle > 100% VH), bevor Sie das Dock von unten anschieben (transform: translateY(0) aus translateY(100%)).
• Layout-Aufteilung: Beschränken Sie das Dock auf einen einzigen primären Aktionsbutton (z. B. "In den Warenkorb") und ein sekundäres Utility-Button/Abzeichen (z. B. "Preis" oder "Speichern"), um die Tippziele extrem sauber zu halten.

4. Strukturierung von Desktop-Sticky-Sidebars und -Widgets

Ein Sidebar-Widget muss im Viewport-Fokus verriegelt bleiben, während es neben tiefen Hauptinhaltskolumnen scrollt:

• Container-Isolation: Die Sidebar muss sich in einem Spaltencontainer befinden, der der Höhe des Hauptinhaltsbereichs entspricht.
• Position-Sticky-Spezifikation: Gestalten Sie das Widget mit position: sticky; top: calc(var(--header-height) + var(--space-l));. Dies verhindert, dass das Widget hinter der Hauptnavigationsleiste verschwindet oder sie überlappt.
• Fußzeilen-Grenzverriegelung: Stellen Sie sicher, dass die übergeordnete Spalte des Sticky-Widgets overflow: visible hat (oder ordnungsgemäß in einem Grid-Flex-Wrapper enthalten ist), sodass der Browser das Widget auf natürliche Weise daran hindern kann, die globale Fußzeile oder untere Abschnitte zu überlappen.

5. Tastaturfokusverdeckung verhindern (Barrierefreiheit Kern)

Einer der häufigsten Fehler im Webdesign in Bezug auf Barrierefreiheit tritt auf, wenn ein Tastaturbenutzer einen Link fokussiert, dieser Link jedoch unter einer Sticky-Kopfzeile oder einem unteren Dock versteckt ist (Verstoß gegen WCAG 2.2 SC 2.4.11 Fokus nicht verdeckt).

• Scroll-Margin-Top: Wenden Sie einen globalen scroll-margin-top auf alle Zielabschnitte, Überschriften (h2, h3) und wichtige interaktive Ziele an:

  :target, [id] {
    scroll-margin-top: calc(var(--header-height) + var(--space-m));
  }
  

• Fokus-Padding: Wenn ein interaktives Element Tastaturfokus erhält, muss der Browser-Viewport so scrollen, dass das Element vollständig außerhalb der Grenzen aller persistenten Sticky-Overlays sichtbar ist.
• Notausstieg: Wenn ein Modal oder Dropdown von einem Sticky-Element aus geöffnet wird, fangen Sie den Fokus (mit focus-trap-implementation) und machen Sie den Hintergrundseiteninhalt inert.

6. Entwurf von schwebenden Aktionsbuttons (FABs) und Zurück-nach-oben-Triggern

FABs sitzen in den unteren Ecken des Viewports, um schnelle sekundäre globale Dienstprogramme bereitzustellen.

• Schwellenbasierter Eintritt: Blenden Sie den "Zurück nach oben"-Trigger aus, bis der Benutzer mindestens zwei vollständige Viewports gescrollt hat (scrollY > 200% VH). Nach dem Auslösen blenden Sie ihn mit einem Einblend- und Skalierungseffekt ein (transform: scale(1); opacity: 1; aus scale(0.8); opacity: 0;).
• Viewport-Offsets: Halten Sie FABs auf dem Desktop mindestens 24px und auf Mobilgeräten 16px vom rechten Viewport-Rand entfernt.
• Zielblockierung vermeiden: Positionieren Sie FABs horizontal entgegengesetzt zu den primären Lesezeilen des Inhalts. Stellen Sie sicher, dass sie beim Scrollen an das Seitenende keine Links, Social-Symbole oder Inline-Navigation in der Fußzeile blockieren.

Entscheidungsregeln

• Statische vs. progressive Kopfzeile: Verwenden Sie eine statische Sticky-Kopfzeile, wenn die Website ein aufgabenorientiertes Webportal oder ein E-Commerce-Shop ist, bei dem Suche und Filterung ständig verwendet werden. Verwenden Sie eine progressive Sticky-Kopfzeile für Artikel-Layouts, Content-Marketing oder Verkaufslandingpages, bei denen der vertikale Lesebereich Priorität hat.
• Unteres Dock vs. Inline-CTA: Verwenden Sie auf Mobilgeräten einen unten angedockten CTA, wenn die Seite ein einzelnes, hochwertiges Conversion-Ziel enthält (wie Anmeldung oder Kauf). Verwenden Sie kein unteres Dock, wenn die Seite mehrere konkurrierende Aktionen mit gleicher Priorität enthält.
• FAB-Größe und Touch-Bereich: Stellen Sie sicher, dass Floating-Trigger kreisförmig oder abgerundete Karten sind. Das visuelle Element muss mindestens 48px im Durchmesser sein, und der tatsächliche interaktive Tippcontainer muss einen Mindestfußabdruck von 44x44px erfüllen (WCAG 2.2 bevorzugt), um eine einfache Daumenbedienung zu ermöglichen.
• Progressives Weichzeichnen vs. Vollfarben: Verwenden Sie backdrop-filter: blur(8px) mit einer leicht transparenten Farbe (z. B. rgba(255, 255, 255, 0.8)) anstelle von vollständig deckenden Hintergründen. Dies bewahrt ein Gefühl der visuellen Tiefe und lässt den Benutzer den Scrollfortschritt hinter dem Sticky-Rahmen wahrnehmen.

Einschränkungen

• Barrierefreiheit (WCAG AA Minimum):
  • SC 2.4.11 Fokus nicht verdeckt (Minimum): Hochkontrast-Fokusringe dürfen niemals hinter Sticky-Elementen versteckt sein. Stellen Sie sicher, dass Elemente sauber durchtabbt werden können, ohne von Kopf- oder Fußzeilen blockiert zu werden.
  • SC 2.5.8 Zielgröße (Minimum): Alle interaktiven Ziele in Sticky-Leisten und FABs müssen mindestens 24x24px groß sein, wobei 44x44px für primäre Daumen-Trigger auf mobilen unteren Docks bevorzugt werden.
  • Kein Tab-Trap: Tastaturbenutzer müssen mit standardmäßigem Tab / Shift+Tab in und aus den Sticky-Leisten-Steuerelementen navigieren können.
• Responsivität (Layout-Stabilität):
  • Sticky-Ebenen dürfen niemals einen horizontalen Viewport-Überlauf verursachen. Verwenden Sie prozentbasierte Breiten oder left: 0; right: 0;-Layouts mit präzisen Box-Sizing-Einschränkungen.
  • Wandeln Sie auf Mobilgeräten Desktop-Sticky-Sidebars in einfache Inline-Panels um oder fassen Sie sie in der unteren Schublade zusammen.
• Layout-Shift-Minderung (CLS):
  • Ändern Sie niemals dynamisch ein Element von position: static auf position: fixed, ohne sein ursprüngliches räumliches Volumen zu reservieren. Der Wechsel zu fixed lässt sofort die ursprüngliche Containenhöhe kollabieren, was eine massive Cumulative Layout Shift (CLS) verursacht. Verwenden Sie stattdessen position: sticky (das das Layoutvolumen reserviert) oder schalten Sie Stile innerhalb eines vorreservierten Containers um.

Häufige Fehlermuster

• Der Fokusblockierungsschleier: Ein Tastaturbenutzer tabbt durch die Seite, aber der Fokusring landet auf Links, die vollständig unter der Sticky-Kopfzeile versteckt sind, sodass sie unsichtbar werden.
• Die iOS-Home-Indikator-Überlappung: Andocken einer mobilen unteren Leiste ohne Hinzufügen von env(safe-area-inset-bottom), was dazu führt, dass die native OS-Wischleiste direkt auf dem "Jetzt kaufen"-Button sitzt.
• Die ruckelnde Scroll-Schleife: Einrichten eines Scroll-Übergangs mit JavaScript, der genau an einer Grenzlinie auslöst, was dazu führt, dass die Sticky-Leiste in einem schnellen visuellen Stottern zwischen sichtbaren und unsichtbaren Zuständen wechselt.
• Das Viewport-Sandwich: Gleichzeitiges Aktivieren einer dicken Sticky-Kopfzeile und einer dicken Sticky-Fußzeile auf einem kleinen mobilen Gerät, wodurch der lesbare Bildschirmbereich auf ein winziges 40%-Fenster reduziert wird.
• Der CLS-Snap-Kollaps: Umschalten einer Kopfzeile auf fixed beim Scrollen, wodurch der Hauptseiteninhalt sofort um 80px nach oben schnappt und den Benutzer desorientiert.

Validierungskriterien

• Viewport-Flächenprüfung: Sticky-Elemente belegen nie mehr als 15% des vertikalen Viewports auf Desktop oder Mobilgeräten.
• Fokusschutz (SC 2.4.11): Alle tastaturfokussierten Elemente bleiben vollständig außerhalb der Grenzen persistenter Sticky-Elemente sichtbar. Globaler scroll-margin-top ist konfiguriert.
• Mobile Safe-Area-Ausrichtung: Das mobile untere Dock verwendet explizit env(safe-area-inset-bottom), um Überschneidungen mit Gerätesteuerungen zu vermeiden.
• Trigger-Schwellenlogik: Das mobile untere Dock bleibt im anfänglichen Hero-Viewport versteckt und wird erst nach Passieren des Hero-CTA ein-/ausgeblendet.
• Layout-Shift-Prävention: Progressive Kopfzeilen und Sticky-Sidebar-Widgets werden mit position: sticky gestaltet oder in vorab gemessenen Containern platziert, um eine Null-Cumulative-Layout-Shift (CLS) zu garantieren.
• Keine Überlappungskonflikte: Stacking-Context Z-Indizes sind klar kartiert und dokumentiert, um visuelle Überlappungsfehler zu vermeiden.
• Zielfußabdrücke: Mobile angedockte Trigger und FABs erfüllen die Touch-Ziel-Präferenz von 44x44px.