Floating Bar
Eine Floating Bar ist ein schmales Banner, das den Seitenrand überlagert und über dem Inhalt schwebt, um einen dauerhaften Call-to-Action zu zeigen, ohne den Bildschirm zu übernehmen.
Das Wichtigste in Kürze
- Sie liegt über der Seite und reserviert keinen Platz, nichts verschiebt sich.
- Der Auslösezeitpunkt entscheidet, ob sie als Hinweis oder als Störung wirkt.
- Ein transparenter Overlay-Bereich kann Klicks auf darunterliegende Links verschlucken.
- Eine Häufigkeitsbegrenzung verhindert, dass Leser sie ungelesen wegklicken.
- Auf dem Smartphone ist eine Leiste über einem Drittel des Viewports faktisch ein Modal.
Im Detail
Eine Floating Bar wird über dem Dokument gezeichnet, statt darin zu liegen. Sie belegt keinen Platz im Layout, deshalb bewegt sich beim Erscheinen oder Verschwinden nichts; sie überdeckt schlicht den Streifen, den sie einnimmt. Damit steht sie zwischen einer Sticky Bar, die eigenen Platz reserviert, und einem Modal, das alles blockiert. Weil sie ein Overlay ist, bestimmen Stapelreihenfolge und Zeigerbehandlung ihr Verhalten, nicht die Regeln des Dokumentenflusses. Was sie verdeckt, hängt daher allein von Breite und Höhe des Bildschirms ab.
Das Timing leistet die meiste Arbeit. Beim Ankommen ausgelöst, unterbricht sie eine Seite, die noch niemand gelesen hat. Ausgelöst durch Scrolltiefe, Verweildauer oder Exit-Intent, erscheint sie, wenn Absicht bereits vorhanden ist, und wirkt als Hinweis statt als Störung. Der zweite Hebel ist die Häufigkeit, denn eine Leiste, die bei jedem Seitenaufruf zurückkehrt, trainiert reflexhaftes Schließen. Dagegen stehen die verdeckten Inhalte, die kein aggregiertes Reporting sichtbar macht. Auslöser und Häufigkeit gehören deshalb vor dem Text entschieden.
Die technischen Details zählen mehr als der Text. Sie braucht einen expliziten Stacking-Kontext, damit sie über der Seite, aber unter jedem Modal liegt, Zeigerereignisse begrenzt auf das sichtbare Element, damit Klicks auf darunterliegende Links nicht verschluckt werden, und eine Fokusreihenfolge, die das Schließen-Element per Tastatur erreicht. Eine kurze Einblendanimation wirkt als Ankunft statt als Renderfehler. Im Lead-Funnel lädt sie mitten im Artikel unaufdringlich zu einer Scorecard ein. Ohne diese Details wirkt selbst die beste Botschaft wie ein Defekt.
Genau das Overlay-Verhalten macht sie riskant. Ein transparenter Bereich, der dennoch Zeigerereignisse abfängt, blockiert sichtbare Links, und der Fehler wirkt wie eine kaputte Website statt wie eine aufdringliche Leiste. Sie ist auch unzuverlässig, wo Inhalte umbrechen, denn einen festen Streifen zu überdecken ist nur sicher, wenn Sie bei jeder Breite wissen, was darunter liegt. Auf dem Smartphone verschwimmt zudem die Grenze zum Modal. Prüfen Sie darum jede Breakpoint-Breite einzeln, nicht nur den Entwurf.
Beispiel aus der Praxis
So wird es gemessen
Messen Sie Klicks gegen die Einblendungen, bei denen die Leiste tatsächlich gerendert wurde, und trennen Sie nach Auslöser. Eine durch Scrolltiefe und eine durch Exit-Intent erzeugte Einblendung beschreiben unterschiedliche Zustände, ein Mittelwert daraus ist wertlos. Die Schließrate ist die Gegenzahl: hohe Schließrate bei ordentlicher Klickrate heißt polarisierend, hohe Schließrate bei wenigen Klicks heißt zu früh ausgelöst.
Prüfen Sie dann die Kosten. Vergleichen Sie Scrolltiefe und Verweildauer von Sitzungen mit ausgelöster Leiste gegen Sitzungen auf denselben Seiten ohne sie, um zu sehen, ob sie das Lesen unterbricht. Beobachten Sie außerdem die Klickraten der Links im überdeckten Streifen. Ein Rückgang nach dem Start ist der klarste Beleg, dass das Overlay Ereignisse abfängt.
Häufige Fehler
Der technische Fehler ist ein Container, der größer ist als die sichtbare Leiste. Unsichtbares Padding liegt über der Seite, fängt Zeigerereignisse ab, und darunterliegende Links reagieren nicht mehr, aus Gründen, die kein Analytics-Report erklärt. Begrenzen Sie die interaktive Fläche auf das sichtbare Element, deaktivieren Sie Zeigerereignisse auf transparenten Wrappern und klicken Sie nach dem Livegang jeden Link im überdeckten Streifen auf einem echten Gerät an.
Der strategische Fehler ist das Auslösen beim Laden. Damit ist die Unterbrechung verbraucht, bevor die Seite Aufmerksamkeit verdient hat, und für Besucher aus der Suche ist sie das Erste, was sie sehen. Lösen Sie stattdessen über Scrolltiefe, Verweildauer oder Exit-Intent aus. Verwandt ist der Fehler, sie auf jeder Seite desselben Besuchs erneut zu zeigen, was einen nützlichen Hinweis zu ungelesenem Hintergrundrauschen macht.
Häufig gestellte Fragen
Wie unterscheidet sich eine Floating Bar von einer Sticky Bar?
Beide bleiben beim Scrollen sichtbar, doch eine Floating Bar überlagert die Seite über dem Inhalt, während eine Sticky Bar üblicherweise eigenen Platz am Rand reserviert. Der Unterschied betrifft vor allem die Schichtung und ob Inhalte verschoben werden.
Kann eine Floating Bar Exit-Intent nutzen?
Ja, Floating Bars werden oft durch Exit-Intent, Scrolltiefe oder einen Timer ausgelöst, damit sie in Momenten hoher Absicht erscheinen. So zeigen Sie das Angebot nicht zu früh und verärgern neue Besucher nicht.
Blockiert eine Floating Bar Klicks auf meiner Seite?
Das kann passieren, wenn sie interaktive Elemente ohne korrekten Stacking-Kontext oder Pointer-Einstellungen überlagert. Testen Sie sorgfältig, damit das Overlay nie Taps abfängt, die für darunterliegende Buttons oder Links gedacht sind.
Was unterscheidet eine Floating Bar konkret von einer Sticky Bar?
Die Teilnahme am Layout. Eine Sticky Bar reserviert Platz, deshalb lässt sich die Seite entsprechend abpolstern und nichts wird verdeckt. Eine Floating Bar liegt über der Seite und reserviert nichts, verdeckt also, was darunter liegt. Die schwebende Variante ist leichter nachzurüsten und leichter falsch zu machen, weil ihr verdeckter Bereich vom Viewport abhängt.
Wann sollte eine Floating Bar ausgelöst werden?
Nachdem der Besucher Interesse gezeigt hat. Scrolltiefe hinter dem ersten Abschnitt, eine Verweildauer von einigen zehn Sekunden oder Exit-Intent am Desktop funktionieren, und jede Variante passt zu einem anderen Seitentyp. Lange Artikel sprechen für Scrolltiefe, Preis- und Vergleichsseiten für Exit-Intent, kurze Seiten brauchen das Muster meist gar nicht.
Warum funktionieren Links nach dem Einbau nicht mehr?
Fast immer, weil der Container des Overlays größer ist als sein sichtbarer Inhalt und über einer unsichtbaren Fläche Zeigerereignisse abfängt. Setzen Sie Pointer-Events auf dem Wrapper auf none und aktivieren Sie sie nur auf der Leiste selbst. Prüfen Sie auch die Stapelreihenfolge, denn ein hoher z-index auf einem seitenbreiten Wrapper überdeckt weit mehr als der Entwurf vermuten lässt.
Wie oft sollte derselbe Besucher sie sehen?
Einmal pro Sitzung ist ein sicherer Standard, und ein Schließen sollte sie für Tage statt für Minuten unterdrücken. Der Wert des Musters liegt darin, wie ein passender Vorschlag zu wirken, und Wiederholung zerstört genau das. Speichern Sie das Schließen auf dem Gerät des Besuchers und setzen Sie es zurück, wenn sich das Angebot wirklich ändert.
Gelten Floating Bars als störende Einblendungen?
Sie können es, wenn die Leiste einen großen Teil des Bildschirms belegt oder den Hauptinhalt beim Ankommen aus der Suche verdeckt. Eine schmale, mitten auf der Seite ausgelöste Leiste ist etwas anderes als ein seitenbreites Overlay direkt beim Laden. Der sichere Test ist, ob der Hauptinhalt auf einem Smartphone das dominierende Element bleibt.
Wie mache ich eine Floating Bar barrierefrei?
Nehmen Sie das Schließen-Element in die Tastatur-Fokusreihenfolge auf, geben Sie ihm ein echtes Label statt eines bloßen Icons und stellen Sie sicher, dass der Fokus nicht in der Leiste gefangen bleibt. Kündigen Sie sie höflich an, statt einen Screenreader mitten im Satz zu unterbrechen, und prüfen Sie den Kontrast wie beim Rest der Seite.