Tutorials

Wix Header-Anpassung: So steuerst du das Shrink- & Scroll-Verhalten

Melden

Hier ist ein umfassendes Tutorial, wie du das Header-Resize-Verhalten (das „Schrumpfen“ beim Scrollen) in Wix anpasst oder fixierst.

Ein Header, der sich beim Scrollen verkleinert (Shrink-Effekt), sieht professionell aus und spart Platz auf dem Bildschirm. In Wix gibt es je nach Editor (Standard Editor oder Wix Studio) unterschiedliche Wege, dies einzustellen.

Methode 1: Der klassische Wix Editor (Einfachste Methode)

Im Standard-Editor ist die Funktion meistens bereits integriert und muss nur aktiviert werden.

Schritt 1: Header fixieren

Damit der Header überhaupt beim Scrollen sichtbar bleibt und schrumpfen kann, muss er „fixiert“ sein.

  1. Klicke auf deinen Header (die Kopfzeile).
  2. Klicke auf das Einstellungen-Symbol (Zahnrad).
  3. Wähle unter „Scroll-Einstellungen“ die Option Fixiert (Fixed).

Schritt 2: Den Shrink-Effekt aktivieren

Sobald der Header fixiert ist, erscheinen oft zusätzliche Optionen:

  1. Klicke erneut auf den Header.
  2. Gehe auf Scroll-Verhalten.
  3. Wähle hier Header schrumpft (Header shrinks).
  4. Wichtig: Du kannst nun oft die „minimale Höhe“ feststellen, auf die der Header schrumpfen soll.

Methode 2: Wix Studio (Für maximale Kontrolle)

Wix Studio (der Nachfolger von Editor X) bietet fortgeschrittene Möglichkeiten für das Scroll-Verhalten.

  1. Wähle den Header im Editor aus.
  2. Schau im rechten Inspektor-Panel unter Layout.
  3. Setze die Position auf Sticky (Haftend).
  4. Gehe zu Interaktionen (Blitz-Symbol) -> Scrollen.
  5. Füge einen Effekt hinzu: Größe anpassen (Resize/Shrink).
  6. Hier kannst du genau definieren, bei wie viel Pixel Scroll-Distanz der Header um wie viel Prozent schrumpfen soll.

Methode 3: Individuelle Anpassung mit Velo (Code)

Falls die Standard-Optionen nicht ausreichen (z.B. wenn sich das Logo verkleinern oder die Hintergrundfarbe ändern soll), kannst du Velo by Wix nutzen.

Schritt-für-Schritt:

  1. Aktiviere den Entwicklermodus oben im Menü.
  2. Gib deinem Header die ID #myHeader.
  3. Erstelle einen „Anker“ (Anchor) direkt unter dem Header (nenne ihn #scrollAnchor).
  4. Nutze folgenden Code im Code-Bereich deiner Seite:
$w.onReady(function () {
    // Wenn der Anker den Sichtbereich verlässt (nach unten gescrollt)
    $w("#scrollAnchor").onViewportLeave(() => {
        $w("#myHeader").state = "shrunk"; // Falls du Status-Container nutzt
        // ODER direkt CSS-Klassen/Eigenschaften ändern:
        $w("#myHeader").collapse(); // Beispielhaft
    });

    // Wenn der Anker wieder sichtbar wird (ganz oben)
    $w("#scrollAnchor").onViewportEnter(() => {
        $w("#myHeader").expand();
    });
});

Hinweis: Für ein echtes Resize via Code ist oft die Arbeit mit „Multi-State-Boxen“ im Header am einfachsten.

Häufige Probleme und Lösungen

1. Der Header „springt“ beim Scrollen

Dies passiert oft, wenn der Header zu viele Elemente enthält, die sich gegenseitig verschieben.

  • Lösung: Gruppiere alle Elemente im Header oder nutze einen Container, um die Struktur stabil zu halten.

2. Das Logo wird zu klein oder unscharf

Wenn der Header schrumpft, wird das Bild oft einfach skaliert.

  • Lösung: Verwende ein SVG-Format für dein Logo. SVGs bleiben bei jeder Größe gestochen scharf.

3. Mobil-Ansicht sieht chaotisch aus

Der Shrink-Effekt wird auf Mobilgeräten oft automatisch deaktiviert, da der Platz begrenzt ist.

  • Tipp: Deaktiviere das „Fixieren“ des Headers auf Mobilgeräten in den Mobil-Einstellungen von Wix, um mehr Platz für den Content zu schaffen.

Zusammenfassung der Checkliste

  • [ ] Ist der Header auf „Fixiert“ gestellt?
  • [ ] Ist unter Scroll-Verhalten „Schrumpfen“ ausgewählt?
  • [ ] Hast du die Vorschau genutzt, um die Geschwindigkeit des Effekts zu prüfen?
  • [ ] Ist das Logo als SVG hochgeladen, um Unschärfe zu vermeiden?

Mit diesen Schritten sollte dein Wix-Header perfekt beim Scrollen reagieren!

0