Position Sticky innerhalb von overflow auto / hidden

Ein Accordeon mit einer großen Tabelle verwendet "overflow: hidden", während die Tabelle selbst "overflow: auto" nutzt, um sowohl horizontal als auch vertikal gescrollt werden zu können. Eigentlich funktioniert "position: sticky" innerhalb dieser Tabelle nicht mehr, mit dieser Code-Vorlage allerdings schon.

Position Sticky innerhalb von overflow auto / hidden
Code-Vorlage
Mit Video-Anleitung
Demo Beispiel enthalten
Mit Text-Anleitung
Diesen Trick und 43 weitere im Bundle kaufen
Für 49 € freischalten
Was ist enthalten?
Vorschau

Ausgangslage:
Ein Accordeon ist auf overflow hidden gestellt und darin befindet sich eine lange Preistabelle die auf overflow Auto gestellt ist, damit sie horizontal und vertikal gescrollt werden kann. Jetzt möchte man den Header von der Preistabelle sticky oben mit scrollen lassen. Das geht mit dieser Codevorlage und nur 2 Attributes, die man in Webflow vergeben muss. Video Anleitung inklusive.

Dieser Code bietet eine elegante Lösung für diese Herausforderung. Hier sind einige der Vorteile und Anwendungen:

  1. Optimierte Übersichtlichkeit: Bei Preistabellen oder Inhalten, die horizontal gescrollt werden und lang sind, kann die Übersichtlichkeit eine Herausforderung darstellen. Der Code ermöglicht es dir, den Tabellen-Header "sticky" zu machen, was bedeutet, dass er beim Scrollen oben auf der Seite bleibt. Dadurch behalten Besucher stets den Überblick in welcher Spalte sie sich befinden.
  2. Bessere Nutzererfahrung: Die Benutzerfreundlichkeit wird deutlich verbessert, da Nutzer den Tabellenkopf im Blick behalten, während sie horizontal durch die Tabelle scrollen. Dies ist besonders nützlich, wenn es viele Daten oder Preisoptionen gibt.
  3. Einfache Implementierung: Du benötigst nur zwei Attribute, um diesen Effekt in Webflow hinzuzufügen, ohne aufwendige Anpassungen oder Codierung. Die Implementierung ist benutzerfreundlich und erfordert keine fortgeschrittenen technischen Kenntnisse.
  4. Video-Anleitung: Die beigefügte Video-Anleitung macht die Anwendung dieses Codes noch einfacher. Du kannst den gesamten Prozess leicht nachvollziehen und in deinen Webflow-Projekten anwenden.

Zusammenfassend bietet dieser Code eine clevere Lösung, um die Benutzerfreundlichkeit von Webflow-Websites zu optimieren, insbesondere wenn es um horizontales und vertikales Scrollen von großen technischen Tabellen geht. Dieses Feature ermöglicht es, wichtige Informationen im Blick zu behalten und bietet eine attraktive, gut gestaltete Nutzererfahrung.

Diesen Trick und 43 weitere im Bundle kaufen
Für 49 € freischalten
Was ist enthalten?

Weitere nützliche Webflow Tricks

Position Sticky innerhalb von overflow auto / hidden
Highlight
Freischalten
Position Sticky innerhalb von overflow auto / hidden

Ein Accordeon mit einer großen Tabelle verwendet "overflow: hidden", während die Tabelle selbst "overflow: auto" nutzt, um sowohl horizontal als auch vertikal gescrollt werden zu können. Eigentlich funktioniert "position: sticky" innerhalb dieser Tabelle nicht mehr, mit dieser Code-Vorlage allerdings schon.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Webflow Slider bei einem bestimmten Slide starten lassen
Highlight
Freischalten
Webflow Slider bei einem bestimmten Slide starten lassen

Entscheide welcher Slide beim laden der Seite zuerst angezeigt werden soll. Einfach über Attributes editierbar.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Webflow Lightbox Hack: Gruppen-Slugs per JavaScript steuern
Freischalten
Webflow Lightbox Hack: Gruppen-Slugs per JavaScript steuern

Ein Trick, der dir zeigt, wie du in Webflow mehrere unabhängige Lightbox-Galerien mit dynamischen CMS-Gruppennamen erstellst, ohne dass sie sich in einer Gruppe öffnen.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Horizontal Sektion scrolling Parallax Bilder Effekt (Webflow Interactions)
Kostenlos
Freischalten
Horizontal Sektion scrolling Parallax Bilder Effekt (Webflow Interactions)

Ein Effekt, welcher eine Sektion horizontal über den Screen scrollt und gleichzeitig Bilder hinter einem Fenster parallax bewegt. Ohne Custom Code!

Cloneable
Text-Anleitung
Demo Beispiel
Video-Anleitung
Webdesign Galerie mit ganzen Screenshots – Landbook
Kostenlos
Freischalten
Webdesign Galerie mit ganzen Screenshots – Landbook

Jeder Screenshot beinhaltet eine ganze Website-Seite und nicht nur einen Ausschnitt. Zudem gibt es gute Filtermöglichkeiten.

Inspiration
Text-Anleitung
Demo Beispiel
Video-Anleitung
Eigener Video Player komplett in Webflow gebaut
Kostenlos
Freischalten
Eigener Video Player komplett in Webflow gebaut

Bau dir ein Video Player komplett in Webflow mit eigenen Interaktionen und Icons. Das mp4 File muss selbst gehostet werden.

Cloneable
Text-Anleitung
Demo Beispiel
Video-Anleitung
Kostenlose Bilder und Videos für Kundenprojekte – meine Quellen (kommerzielle Zwecke)
Freischalten
Kostenlose Bilder und Videos für Kundenprojekte – meine Quellen (kommerzielle Zwecke)

Liste an Plattformen für kostenloses Bild- und Videomaterialien. Nutze ich als Webdesigner bei jedem Kundenauftrag.

Tool
Text-Anleitung
Demo Beispiel
Video-Anleitung
Overflow auto (horizontal scrollen) mit vor und zurück Button
Highlight
Freischalten
Overflow auto (horizontal scrollen) mit vor und zurück Button

Wenn du mit horizontal scrollbaren Sektionen arbeitest, solltest du vorwärts und rückwärts Button hinzufügen, die der User als Backup klicken kann, da nicht jede Maus horizontal scrollen kann.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Einmalig ein Info-Banner (Notification Bar) auf der Website anzeigen
Highlight
Freischalten
Einmalig ein Info-Banner (Notification Bar) auf der Website anzeigen

Sobald der Seitenbesucher den Info-Banner weggeklickt, wird er beim nächsten Laden der Website nicht mehr angezeigt, da die Entscheidung mit einem Cookie gespeichert wird. Über Attribute editierbar und ohne externe JS Library.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
JavaScript Breakpoints für Webflow
Freischalten
JavaScript Breakpoints für Webflow

Wenn du mit zusätzlichem Custom Code in Webflow arbeitest, soll dieser auch manchmal nur bei einem bestimmten Breakpoint ausgegeben werden. Dieser Code hilft dir dabei.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Erstes FAQ Accordion standardmäßig geöffnet anzeigen
Freischalten
Erstes FAQ Accordion standardmäßig geöffnet anzeigen

Zeige beim laden einer Seite das erste Element einer FAQ Liste standardmäßig geöffnet an.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
DSGVO konforme Alternative zu Webflow Forms
Freischalten
DSGVO konforme Alternative zu Webflow Forms

Mit einem Kostenlosen Plan von 250 Absendungen pro Monat, sehr einfacher Integration und du kannst weiterhin die Webflow Form-Komponente verwenden.

Tool
Text-Anleitung
Demo Beispiel
Video-Anleitung