Scrollen der Seite verhindern wenn eine Webflow Navigation geöffnet ist

Dieser einfache Code, stoppt das Scrollen des Hintergrunds, wenn das Webflow mobile Menü geöffnet ist. Funktioniert auch auf Desktop.

Scrollen der Seite verhindern wenn eine Webflow Navigation geöffnet ist
Code-Vorlage
Demo Beispiel enthalten
Mit Text-Anleitung
Diesen Trick und 43 weitere im Bundle kaufen
Für 49 € freischalten
Was ist enthalten?
Vorschau

Hier kommt ein einfacher, aber effektiver Code für Webflow ins Spiel, der die Nutzererfahrung deutlich verbessern kann. Wenn das mobile Menü auf einer Website geöffnet ist, stoppt dieser Code das Hintergrundscrollen automatisch. Und das Beste daran? Du benötigst keine zusätzlichen Klassen oder aufwendigen Anpassungen – der Code funktioniert mit den Standard-Klassennamen von Webflow.

Die Vorteile dieser Lösung sind vielfältig:

  1. Verbesserte Usability: Das automatische Stoppen des Hintergrundscrollens, wenn das mobile Menü aktiviert ist, sorgt für eine benutzerfreundliche Navigation.
  2. Optimiert für Webflow: Der Code wurde speziell für Webflow entwickelt und passt nahtlos in die Plattform.
  3. Keine zusätzliche Konfiguration: Du musst keine weiteren Klassen oder komplizierten Einstellungen hinzufügen – der Code funktioniert direkt aus der Box.
  4. Mobile-First-Ansatz: Da mobile Nutzer einen Großteil des Webverkehrs ausmachen, ist es entscheidend, ihr Erlebnis zu optimieren.
  5. Besseres Design: Das Stoppen des Hintergrundscrollens verhindert, dass der Hintergrund beim Navigieren im mobilen Menü unabsichtlich verschoben wird.
  6. Zeitersparnis: Mit diesem Code musst du nicht aufwändig nach Lösungen suchen oder eigene Skripte schreiben.

Insgesamt ist dieser Code eine einfache und effektive Methode, um die Benutzererfahrung auf Webflow-Seiten zu optimieren. Er sorgt dafür, dass deine Website auch auf mobilen Geräten reibungslos und benutzerfreundlich funktioniert, ohne dass du zusätzliche Anpassungen vornehmen musst. Ein großer Schritt hin zu einer besseren Nutzerbindung und zufriedeneren Besuchern.

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

Weitere nützliche Webflow Tricks

Ändere die standard Browser Hintergrundfarbe wenn Text markiert wird
Freischalten
Ändere die standard Browser Hintergrundfarbe wenn Text markiert wird

Passe die Standard-Hintergrundfarbe des Browsers an, wenn Text markiert ist, und steuere diese mit deinen Webflow Variablen.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Schnell elegante Mockups aus Screenshots erstellen (kostenlos)
Kostenlos
Freischalten
Schnell elegante Mockups aus Screenshots erstellen (kostenlos)

Einfach bild reinziehen und zwischen Screenshot-Modus, perfekten Browser-Mockups oder Geräten wie iPhone, Tablet und MacBook wählen.

Tool
Text-Anleitung
Demo Beispiel
Video-Anleitung
Horizontales Text / Bilder Karussell (ohne Webflow Interaktionen) | Infinite Marquee
Freischalten
Horizontales Text / Bilder Karussell (ohne Webflow Interaktionen) | Infinite Marquee

Lass Bilder, Logos und Texte mit nur zwei Zeilen CSS Code horizontal durch den Bildschirm wandern. Mit dieser Code-Vorlage musst du nur ein Attribut vergeben.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Webflow Website Launch Checkliste
Freischalten
Webflow Website Launch Checkliste

Meine umfassende Checkliste aus meinem Webflow-Onlinekurs hilft dir bei einem reibungslosen Website-Launch um keine wichtigen Schritte zu übersehen.

Allgemein
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
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
Zahlen animiert hochzählen mit ease-out Effekt (wenn im Viewport)
Freischalten
Zahlen animiert hochzählen mit ease-out Effekt (wenn im Viewport)

Mit diesem JavaScript-Code kannst du Zahlen auf deiner Website animiert hochzählen lassen, und das mit einem sanften "ease-out" Effekt.

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
Webflow Lightbox Schließen-Button stylen
Freischalten
Webflow Lightbox Schließen-Button stylen

Dieser CSS Code überschreibt das Standard-Design von Webflow, welches jedem Lightbox-Schließen-Button mitgegeben wird. Du kannst es mit deinem eigenen Icon versehen.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Autoplay Webflow Tabs
Highlight
Freischalten
Autoplay Webflow Tabs

Passe Webflow Tabs mithilfe von Attributen so an, dass sie automatisch nach einer festgelegten Zeit zum nächsten Tab wechseln (mit animierter Tab-Bar).

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
Scrollen der Seite verhindern wenn eine Webflow Navigation geöffnet ist
Highlight
Freischalten
Scrollen der Seite verhindern wenn eine Webflow Navigation geöffnet ist

Dieser einfache Code, stoppt das Scrollen des Hintergrunds, wenn das Webflow mobile Menü geöffnet ist. Funktioniert auch auf Desktop.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung