Sticky-CTA
Ein Sticky-CTA ist ein Call-to-Action, der an einer festen Position bleibt, meist als Kopf- oder Fußleiste, sodass er beim Scrollen sichtbar bleibt.
Das Wichtigste in Kürze
- Sticky-CTAs fixieren sich am Viewport-Rand erst ab einer Scrollschwelle, nicht beim Laden.
- Die Höhe ist der eigentliche Preis: Jeder Pixel fehlt beim Lesen auf dem Smartphone.
- Erst einblenden, wenn der Hero-Button weggescrollt ist, sonst existiert er doppelt.
- Der Text nennt Ergebnis und Zeitaufwand, nicht ein austauschbares Verb.
- In Formularen, Modals und Quiz-Schritten ausblenden, um Überlappungen zu vermeiden.
Im Detail
Ein Sticky-CTA entsteht über CSS-Positionierung: Das Element verlässt den normalen Dokumentenfluss, sobald eine Scrollschwelle überschritten ist, und rastet an der oberen oder unteren Kante des Viewports ein. Der Browser zeichnet es bei jedem Scroll-Frame neu, weshalb saubere Umsetzungen die Leiste flach halten und auf schwere Schatten oder Animationen verzichten. In der Leiste steht meist ein einziger Button plus eine kurze Wiederholung des Angebots, mit demselben Ziel und denselben Tracking-Parametern wie der eigentliche CTA auf der Seite.
Zwei Größen bestimmen die Wirkung: der Zeitpunkt des Erscheinens und der beanspruchte vertikale Platz. Erscheint die Leiste zu früh, dupliziert sie einen Hero-Button, an dem noch niemand vorbeigescrollt ist; erscheint sie zu spät, verlieren Sie Leser, die sich in der Seitenmitte entscheiden. Die Höhe ist der härtere Kompromiss, denn jeder Pixel fehlt auf kleinen Displays beim Lesen. Schon ab mehr als einer Textzeile wirkt die Leiste als Hindernis statt als Abkürzung. Mehr Kontrast erhöht die Aufmerksamkeit, zu viel erzeugt Bannerblindheit.
In der Praxis kommt die Leiste auf langen Seiten zum Einsatz, auf denen die Entscheidung unterhalb des sichtbaren Bereichs fällt: Preisvergleiche, Case Studies, Landingpages von Quiz-Funnels. Auf einer Pivix-Scorecard-Landingpage trägt sie den Start des Assessments, sodass ein Leser, den die Beispielfragen überzeugt haben, sofort beginnen kann. Der Text sollte Ergebnis und Zeitaufwand benennen statt ein allgemeines Verb zu wiederholen, und die Leiste sollte sich ausblenden, sobald der Besucher in den Quiz-Schritten ist.
Am wenigsten hilft eine Sticky-Leiste auf kurzen Seiten, auf denen der ursprüngliche CTA ohnehin sichtbar bleibt. Schaden richtet sie an, wenn die Seite weitere fixierte Elemente hat: Sticky-Header, Chat-Button und die Browserleisten des Betriebssystems lassen auf dem Smartphone nur einen schmalen Streifen Inhalt übrig. Auch Screenreader- und Tastaturnutzer leiden, wenn die fixierte Leiste in der DOM-Reihenfolge vor dem Hauptinhalt steht. Zeigt eine Seite durchgehend eine klare Aktion, bringt die Leiste nur Unruhe.
Beispiel aus der Praxis
So wird es gemessen
Erfassen Sie Klicks auf die Sticky-Leiste getrennt vom Hero-Button über eine eigene Link-Kennung und vergleichen Sie den Anteil beider Quellen an allen Starts. Aussagekräftig ist der inkrementelle Effekt: Conversions auf Seiten mit Leiste gegenüber vergleichbaren Seiten ohne. Steigen die Leistenklicks, während die Gesamtstarts gleich bleiben, verschiebt die Leiste nur Klicks vom Button auf der Seite.
Beobachten Sie Scrolltiefe und mobile Ausstiegsrate parallel zur Conversion. Eine Leiste, die Platz kostet, zeigt sich zuerst in kürzerer mittlerer Scrolltiefe auf dem Smartphone, lange bevor sie in der Conversion sichtbar wird. Session-Aufzeichnungen decken Überlappungen auf, die aggregierte Kennzahlen verbergen, etwa ein verdecktes Formularfeld. Werten Sie jede Zahl nach Gerät getrennt aus, denn Desktop und Smartphone unterscheiden sich hier deutlich.
Häufige Fehler
Der häufigste Fehler ist, fixierte Elemente zu stapeln, ohne ihre Gesamthöhe zu addieren. Sticky-Header, CTA-Leiste und Cookie-Hinweis belegen zusammen schnell die Hälfte eines Smartphone-Displays, und der Besucher scrollt durch ein Schlüsselloch. Messen Sie die gesamte fixierte Höhe auf einem kleinen Viewport vor dem Livegang, begrenzen Sie die CTA-Leiste auf eine Textzeile und blenden Sie den Cookie-Layer dauerhaft aus, sobald eine Entscheidung gespeichert ist.
Der zweite Fehler ist, die Leiste als Gratisfläche zu behandeln und mit Headline, Preis, Countdown und zwei Buttons zu füllen. Geteilte Aufmerksamkeit senkt die Klickrate, selbst wenn die Leiste häufiger gesehen wird. Lassen Sie eine Aktion stehen; ist eine zweite Option wirklich nötig, machen Sie daraus einen Textlink statt eines konkurrierenden Buttons. Formularfelder und der Tastaturbereich dürfen nie verdeckt werden.
Häufig gestellte Fragen
Was ist der Unterschied zwischen einem Sticky-CTA und einem Floating-CTA?
Ein Sticky-CTA fixiert sich an einem Rand des Layouts, meist als Kopf- oder Fußleiste über die volle Breite, und bleibt innerhalb der Seitenränder. Ein Floating-CTA schwebt als kompakter Button über dem Inhalt, oft in einer Ecke, und überlagert die Seite.
Wann sollte ich einer Landingpage einen Sticky-CTA hinzufügen?
Nutzen Sie ihn auf längeren Seiten, bei denen der Haupt-CTA sonst aus dem Sichtfeld scrollt. Auf kurzen Seiten, wo die Aktion stets sichtbar ist, sorgt eine Sticky-Leiste nur für Unruhe.
Wann sollte ein Sticky-CTA erscheinen?
Erst wenn der Besucher am primären Hero-Button vorbeigescrollt ist, damit beide nie um denselben Bildschirm konkurrieren. Eine Schwelle an der Unterkante des Hero-Bereichs ist verlässlicher als ein fester Pixelwert, weil die Hero-Höhe mit Viewport und übersetzter Textlänge variiert. Blenden Sie die Leiste beim Laden ein, hat die Seite schlicht zwei identische Buttons gleichzeitig.
Sticky-CTA oder Floating-CTA: Was konvertiert besser?
Keiner gewinnt grundsätzlich, sie lösen verschiedene Probleme. Eine Sticky-Leiste nimmt die volle Breite ein und trägt eine kurze Nutzenzeile, was zu einer einzigen klaren Aktion passt. Ein Floating-Button belegt eine Ecke und eignet sich, wenn die Aktion sekundär ist oder bereits ein breites Element fixiert ist. Beide gleichzeitig kosten meist mehr, als sie einbringen.
Schadet ein Sticky-CTA der mobilen Nutzbarkeit?
Möglich, und entscheidend ist die Höhe. Eine Textzeile mit ausreichend großem Tap-Target ist vertretbar; alles Höhere kostet Lesefläche und kann die Bildschirmtastatur verdecken, sobald ein Feld fokussiert ist. Blenden Sie die Leiste bei fokussiertem Eingabefeld oder geöffnetem Modal aus und testen Sie mit eingeblendeten Browserleisten statt im sauberen Emulator.
Muss der Text der Sticky-Leiste dem Hero-Button entsprechen?
Das Versprechen muss übereinstimmen, der Wortlaut nicht. Der Hero trägt die vollständige Einordnung, die Leiste wiederholt das Ergebnis in wenigen Worten, etwa Name und Dauer des Assessments. Vertrauen zerstört eine Leiste, die etwas anbietet, was der Hero nie erwähnt hat, oder die auf ein anderes Ziel führt als erwartet.
Wie verhindere ich, dass die Sticky-Leiste den Footer verdeckt?
Geben Sie der Seite einen unteren Innenabstand in Höhe der Leiste oder lösen Sie die Fixierung, sobald der Footer in den Viewport gelangt, etwa per Intersection Observer. Beides hält Rechtslinks, Kontaktdaten und Datenschutzhinweis erreichbar. Die Leiste als normales Element am Dokumentende zu platzieren, ist der einfachste Rückfall ohne Skripting.
Beeinflusst ein Sticky-CTA Ladezeit oder Layout-Shift?
Das Risiko liegt beim Layout-Shift, nicht bei der Ladezeit. Eine nachträglich eingefügte Leiste verschiebt Inhalte und zählt als kumulativer Layout-Shift; reservieren Sie den Platz im Ausgangslayout oder animieren Sie die Leiste als Overlay, das nichts verschiebt. Eine schattenlastige Leiste, die bei jedem Scroll-Frame neu gezeichnet wird, ruckelt zudem auf schwachen Geräten.