Eine vertikale Navigation mit Scroll-Balken in Webflow erstellen

Level:
Fortgeschritten 👍
Das Video kann nur angezeigt werden, wenn Cookies erlaubt sind.
Cookies akzeptieren und Medien laden
Ergebnis anschauen
Icon für einen externen Link
Im Webflow Designer öffnen und klonen
Icon für einen externen Link
Im Webflow Designer öffnen und klonen
Affiliate Link
Icon für einen externen Link

In diesem Webflow Tutorial bauen wir eine vertikale Sidebar Navigation, die eine Fortschrittsanzeige (progress bar) beinhaltet. Der Balken scrollt mit der Seite mit und zeigt dem Seitenbesucher, wo auf der Seite er sich befindet.
Der Aufbau eignet sich gerade für lange Seiten, die zum Beispiel über eine umfangreiche Scroll-Animation eine Geschichte erzählen und passend dazu auch ein eigenes Design für den Scroll-Balken umsetzen wollen.

Beispiele für gute Scrollytelling Websites, die in Webflow gebaut wurden, habe ich dir in diesem Beitrag zusammengefasst: https://www.webflow-lernen.de/blog/10-crazy-webflow-website-scroll-animationen