Sticky Checkout Summary mit CSS: Die Warenkorb Übersicht die mitscrollt

1. Warum eine Sticky Checkout Summary im Checkout wichtig ist

Bei einem mehrstufigen Checkout mit Versandadresse, Zahlungsart und Bestellübersicht verliert der Nutzer beim Scrollen leicht den Überblick über Gesamtsumme und Warenkorbinhalt. Eine Sticky Checkout Summary hält genau diese Information sichtbar, während der Hauptbereich mit den Formularfeldern normal weiterscrollt. Das reduziert Kaufabbrüche, weil Nutzer nicht zurückscrollen müssen, um zu prüfen, ob ein Rabattcode korrekt angewendet wurde oder wie hoch die Versandkosten ausfallen.

In der Praxis ist eine Sticky Checkout Summary aber eine der häufigsten Stellen, an denen position: sticky scheinbar grundlos nicht funktioniert. Das liegt selten an sticky selbst, sondern fast immer an der umgebenden Layout-Struktur, an Overflow-Eigenschaften im Elternelement oder an falsch berechneten Höhen auf Mobilgeräten. Die folgenden Abschnitte gehen systematisch durch, was eine Sticky Checkout Summary zuverlässig macht, und was sie in der Praxis regelmäßig bricht.

2. position sticky richtig einsetzen

Das Grundprinzip einer Sticky Checkout Summary ist einfach: position: sticky zusammen mit einem top Wert lässt das Element normal im Dokumentfluss scrollen, bis es die definierte Position erreicht, und hält es dort fest, solange der Elterncontainer noch sichtbaren Platz bietet. Anders als position: fixed bleibt das Element also nicht dauerhaft am Bildschirm kleben, sondern respektiert die Grenzen seines Containers, was für eine Checkout Summary essenziell ist, damit sie nicht über den Footer hinaus schwebt.

Wichtig für eine korrekt funktionierende Sticky Checkout Summary: Der top Wert muss zur Höhe eines eventuell vorhandenen Sticky Headers passen, sonst verschwindet die Summary teilweise hinter der Kopfzeile. Ein zusätzlicher max-height Wert kombiniert mit overflow-y: auto auf der Summary selbst verhindert, dass eine sehr lange Warenkorbliste mit vielen Positionen den Viewport sprengt und der Bestellbutton am unteren Rand nicht mehr erreichbar ist.

/* Basic sticky checkout summary — respects a sticky header above it */
.checkout-summary {
  position: sticky;
  top: 5rem; /* matches the height of the sticky header */
  align-self: start; /* prevents grid stretching from breaking sticky */
  max-height: calc(100dvh - 6rem);
  overflow-y: auto;
}

3. Der häufigste Bug: Overflow im Vorfahren

Der mit Abstand häufigste Grund, warum eine Sticky Checkout Summary nicht funktioniert, ist ein Vorfahre-Element mit overflow: hidden, overflow: auto oder overflow: scroll, das nicht selbst der Scroll Container ist, den der Nutzer bewegt. Sticky Positionierung bezieht sich immer auf den nächsten scrollenden Vorfahren, und sobald irgendein Element dazwischen einen eigenen Overflow-Kontext öffnet, bricht die Sticky-Berechnung, ohne dass eine Fehlermeldung im Browser erscheint.

In Magento Checkout Templates passiert das oft unbeabsichtigt, wenn ein Wrapper für ein Card-Layout overflow-hidden für abgerundete Ecken nutzt. Die Lösung für eine funktionierende Sticky Checkout Summary ist, abgerundete Ecken stattdessen über border-radius ohne overflow: hidden zu lösen, oder den Overflow-Container so zu platzieren, dass er nicht zwischen dem Sticky-Element und dem tatsächlichen Scroll-Container liegt.

<!-- WRONG: overflow-hidden wrapper between grid and sticky element breaks sticky -->
<div class="grid grid-cols-3 gap-8">
  <main class="col-span-2">...</main>
  <div class="overflow-hidden rounded-2xl"> <!-- breaks sticky child below -->
    <aside class="checkout-summary sticky top-20">...</aside>
  </div>
</div>

<!-- RIGHT: rounded corners via border-radius only, no overflow-hidden ancestor -->
<div class="grid grid-cols-3 gap-8">
  <main class="col-span-2">...</main>
  <aside class="checkout-summary sticky top-20 rounded-2xl border border-gray-200">...</aside>
</div>

4. Höhenberechnung mit dvh statt vh

Auf Mobilgeräten verändert die dynamische Adressleiste des Browsers die tatsächlich verfügbare Höhe, während der Nutzer scrollt. Die klassische vh Einheit berechnet sich anhand der größtmöglichen Viewport-Höhe und führt bei einer Sticky Checkout Summary dazu, dass max-height: 100vh mehr Platz reserviert, als tatsächlich sichtbar ist, sobald die Adressleiste eingeblendet wird. Das Ergebnis: Der untere Rand der Summary inklusive Bestellbutton wird knapp abgeschnitten.

Die Einheit dvh, für dynamic viewport height, löst dieses Problem, weil sie sich live an die tatsächlich sichtbare Höhe anpasst, inklusive oder exklusive Adressleiste. Für eine Sticky Checkout Summary ist calc(100dvh - Nrem) deshalb der zuverlässigere Ausdruck als 100vh, insbesondere auf iOS Safari, wo der Unterschied zwischen kleinster und größter Viewport-Höhe mehrere Dutzend Pixel betragen kann.

/* dvh adapts to the actually visible viewport, not the largest possible one */
.checkout-summary {
  /* WRONG on mobile: 100vh assumes the browser chrome is always collapsed */
  /* max-height: calc(100vh - 6rem); */

  /* RIGHT: dvh tracks the real visible height as the address bar shows/hides */
  max-height: calc(100dvh - 6rem);
}

/* svh as a safe fallback for the smallest possible viewport, e.g. sticky CTA */
.checkout-cta-bar {
  bottom: calc(100svh - 100dvh);
}

5. Grid-Layout für Checkout und Sticky Sidebar

Für eine Sticky Checkout Summary ist die Wahl des umgebenden Layouts entscheidend. CSS Grid mit zwei Spalten, etwa grid-cols-3 mit dem Hauptbereich über zwei Spalten und der Summary in der dritten, funktioniert zuverlässig, solange align-items: start gesetzt ist. Ohne dieses Attribut strecken Grid-Container ihre Kinder standardmäßig auf die volle Zeilenhöhe, was das Sticky-Element daran hindert, sich innerhalb seines Grid-Bereichs zu bewegen, weil es bereits die volle Höhe einnimmt.

Flexbox als Alternative funktioniert für eine Sticky Checkout Summary ebenfalls, benötigt aber dieselbe Vorsicht: align-items: flex-start auf dem Flex-Container verhindert, dass die Sidebar auf die Höhe des Hauptbereichs gestreckt wird. Ohne diese Einstellung hat das Sticky-Element schlicht keinen Bewegungsspielraum, weil es von Anfang an so hoch ist wie der gesamte Container.

6. Stacking Context und z-index im Checkout

Ein Checkout enthält meist mehrere Elemente, die um dieselbe Bildschirmebene konkurrieren: ein Sticky Header, ein Cookie-Banner, ein Modal für Adressvorschläge und die Sticky Checkout Summary selbst. Ohne bewusste z-index Planung landet die Summary optisch hinter dem Header oder ein Dropdown-Menü verschwindet hinter der Summary, obwohl es eigentlich darüber liegen sollte.

Die verlässliche Lösung ist eine dokumentierte z-index Skala, in der jede Ebene einen festen Wertebereich bekommt, etwa Header bei 50, Summary bei 40, Dropdown-Overlays bei 60 und Modals bei 100. Für die Sticky Checkout Summary reicht in den meisten Fällen ein moderater Wert wie z-index: 10, solange sie unterhalb von Modals, aber oberhalb des normalen Inhaltsflusses liegt. Wichtig ist, dass position: sticky selbst bereits einen neuen Stacking Context öffnet, was bei verschachtelten Sticky-Elementen zu Überraschungen führen kann.

7. Mobile Verhalten: Sticky nur ab Tablet-Breite

Auf schmalen Mobilgeräten ist eine dauerhaft sichtbare Sticky Checkout Summary oft kontraproduktiv, weil sie wertvollen vertikalen Platz für die Formularfelder wegnimmt. Die gängige Praxis ist, die Summary auf Mobilgeräten als einklappbare Leiste am unteren Bildschirmrand darzustellen, die nur die Gesamtsumme zeigt und sich per Klick zur vollständigen Übersicht ausklappt, während position: sticky erst ab einer Tailwind Breakpoint wie lg:sticky aktiv wird.

Diese Aufteilung nutzt Tailwind Utility-Präfixe elegant aus: static lg:sticky lg:top-20 sorgt dafür, dass die Summary auf kleinen Bildschirmen im normalen Fluss bleibt, während sie ab Desktop-Breite zur klassischen Sticky Checkout Summary wird. Für die mobile Variante übernimmt eine kleine Alpine.js Komponente das Auf- und Zuklappen der kompakten Leiste, ohne dass die grundlegende CSS Logik der Desktop-Version angefasst werden muss.

8. Zusammenspiel mit Alpine.js beim Summen-Update

Sobald der Nutzer einen Rabattcode einträgt oder eine Versandart wechselt, muss sich die Sticky Checkout Summary aktualisieren, ohne dass ein Layout-Sprung entsteht, der die Sticky-Position kurzzeitig zerstört. Ändert sich die Höhe der Summary durch neue Zeilen wie einen zusätzlichen Rabatt-Eintrag, verschiebt sich unter Umständen kurz die verfügbare Scrollhöhe, was zu einem sichtbaren Ruckeln führen kann, wenn keine Übergangs-Eigenschaft gesetzt ist.

Eine sanfte transition auf max-height zusammen mit Alpine.js, das nur die Zahlenwerte per x-text aktualisiert, ohne die Struktur selbst neu zu rendern, hält die Sticky Checkout Summary visuell ruhig. Wichtig ist, dass Alpine hier nur Daten austauscht und keine DOM-Knoten neu erzeugt, weil neu erzeugte Elemente den Sticky-Zustand des Browsers zurücksetzen können.

9. Sticky-Strategien im direkten Vergleich

Neben position: sticky gibt es weitere Ansätze, um eine Sticky Checkout Summary umzusetzen, jeder mit eigenen Kompromissen bei Aufwand und Zuverlässigkeit. Ein reines JavaScript-basiertes Sticky-Polyfill, das per Scroll-Listener die Position manuell umschaltet, war vor der breiten Browser-Unterstützung von position: sticky üblich, verursacht heute aber unnötigen Overhead und sichtbares Ruckeln bei jedem Scroll-Event, weil der Haupt-Thread ständig beschäftigt ist.

position: fixed als Alternative löst das Ruckel-Problem, ignoriert aber die Grenzen des Elterncontainers vollständig und muss die Kollision mit dem Footer manuell per JavaScript berechnen, was in der Praxis fehleranfälliger ist als die native Sticky Checkout Summary mit position: sticky. Die native Lösung gewinnt in fast jedem Fall, weil moderne Browser sie ohne Scroll-Listener und ohne Layout-Thrashing berechnen.

10. Zusammenfassung

Eine funktionierende Sticky Checkout Summary ist selten ein reines Styling-Problem, sondern meist eine Frage der Layout-Struktur darum herum. position: sticky selbst funktioniert zuverlässig, bricht aber an Overflow-Eigenschaften im Vorfahren, an fehlendem align-self: start im Grid oder Flex-Container und an der falschen Viewport-Einheit auf Mobilgeräten. dvh statt vh, ein sauberer Scroll Container innerhalb der Summary und eine dokumentierte z-index Skala lösen die häufigsten Praxisprobleme.

Für kleine Bildschirme lohnt sich eine kompakte, einklappbare Variante statt der vollen Sticky Checkout Summary, damit der begrenzte Platz nicht von der Zusammenfassung blockiert wird. Wer diese Punkte systematisch beachtet, bekommt eine Checkout Summary, die auf jedem Gerät ohne Sticky-Bugs mitscrollt und dem Nutzer während des gesamten Checkout-Prozesses Orientierung gibt.

11. FAQ: Sticky Checkout Summary mit CSS