Wie erstelle ich einen klebrigen Header, der auf Scrollen mit CSS schrumpft?

Verwenden Sie die Position: klebrig, um klebrige Köpfe zu erreichen; 2. Modernes CSS kann beim Scrollen durch Animationszeit automatisch schrumpfen: View (), aber die Browserunterstützung ist begrenzt. 3. Es wird empfohlen, JavaScript zu kombinieren, um auf Scroll -Ereignisse in Produktionsumgebungen zu hören. Wenn Sie nach unten Scrollen überschreiten, überschreitet er 50px, fügen Sie die Shrunk -Klasse hinzu, um den Kopf zu verkleinern, und entfernen Sie die Klasse, um den ursprünglichen Status beim Scrollen wiederherzustellen. 4. Optionale Optimierungen umfassen die Verwendung von Transformation oder Willenswechsel zur Verbesserung der Animationsleistung, achten Sie jedoch auf die Layout-Auswirkungen. Diese Lösung hat eine gute Kompatibilität und reibungslose Ergebnisse und eignet sich für modernes Webdesign.

Das Erstellen eines klebrigen Headers, der schrumpft, wenn der Benutzer die Seite nach unten scrollt, ist ein sauberes und modernes UX -Muster. Sie können diesen Effekt nur mit CSS (mit ein wenig Hilfe von position: sticky und scrollgetriebene Animationen) erzielen, obwohl die vollständige Unterstützung für erweiterte Scroll-basierte Effekte möglicherweise die Berücksichtigung der Browserkompatibilität erfordern.

Hier erfahren Sie, wie Sie einen klebrigen Header erstellen, der mit reinem CSS mit einem fallback-freundlichen Ansatz auf Scrollen schrumpft .

✅ 1. Basic Sticky Header mit glattem Schrumpfen auf der Schriftrolle

Wir werden position: sticky für die Animationen der Stickiness und der CSS-Scroll-gesteuerten Animationen (über scroll-timeline und animation )-eine neuere, aber elegante Methode. Wir werden bei Bedarf auch eine einfachere Alternative mit JavaScript zeigen.

HTML -Struktur

 <Header class = "Sticky-Header">
  <div class = "header-content">
    <h1> Meine Website </h1>
    <nav>
      <a href = "#"> home </a>
      <a href = "#"> über </a>
      <a href = "#"> Kontakt </a>
    </nav>
  </div>
</header>

<!-Seiteninhalt, um das Scrollen zu aktivieren->
<main>
  <p> scrollen Sie nach unten, um den Effekt zu sehen ... </p>
  <!-Fügen Sie mehr Inhalte hinzu, um das Scrollen zu aktivieren->
  <div style = "height: 200VH;"> </div>
</main>

✅ 2. CSS: Klebiger Schrumpfen bei Scroll (moderne CSS mit Scroll -Zeitleiste)

Diese Methode verwendet CSS-scrollgesteuerte Animationen , die in modernen Browsern wie Chrome, Edge und Firefox (mit Flaggen) unterstützt werden.

 .Sticky-Header {
  Position: klebrig;
  Top: 0;
  Hintergrund: #ffff;
  Polsterung: 20px 10px;
  Box-Shadow: 0 2px 10px RGBA (0, 0, 0, 0,1);
  Übergang: Polsterung von 0,3 Sekunden;

  / * Scroll Timeline definieren */
  Animationszeit: View ();
  Animationsname: Shrink-Header;
  Animationsbereich: Eintrag 0% Cover 100%;
  Animations-Fill-Mode: Beide;
  Z-Index: 1000;
}

.Header-Content H1 {
  Rand: 0;
  Schriftgröße: 24px;
  Übergang: Schriftgröße 0,3s Leichtigkeit;
}

.header-content nav a {
  Rand-Links: 20px;
  Schriftgröße: 18px;
  Farbe: #333;
  Textdekoration: Keine;
  Übergang: Schriftgröße 0,3s Leichtigkeit;
}

/ * Animation zum Schrumpfen der Header *//
@keyframes Shrink-Header {
  aus {
    Padding-Block: 20px;
  }
  Zu {
    Padding-Block: 10px;
  }
}

/ * Optional: auch den Text verkleinern *//
.Sticky-Header: IS (: Zustand (geschrumpft)) .Header-Content H1 {
  Schriftgröße: 20px;
}

? HINWEIS : animation-timeline: view() erstellt eine Zeitleiste basierend auf der Bildlaufposition des Elements in das Ansichtsfenster. Dies ist der Schlüssel zum scrollengebundenen Animationen in reinem CSS.

Die Browser-Unterstützung für animation-timeline und @scroll-timeline ist jedoch weiterhin begrenzt. Verwenden Sie für eine breitere Kompatibilität den folgenden JavaScript -Fallback.

✅ 3. Fallback: Pure CSS Minimal JavaScript (für die Produktion empfohlen)

Wenn Sie eine breite Browserunterstützung (Safari, älteres Chrom usw.) benötigen, kombinieren Sie CSS -Klassen mit einem kleinen JavaScript, um die Bildlaufposition zu erkennen.

CSS aktualisiert

 .Sticky-Header {
  Position: klebrig;
  Top: 0;
  Hintergrund: #ffff;
  Polsterung: 20px 10px;
  Box-Shadow: 0 2px 10px RGBA (0, 0, 0, 0,1);
  Übergang: Polsterung von 0,3 Sekunden;
  Z-Index: 1000;
}

.Sticky-header.shrunk {
  Polsterung: 10px;
}

.Sticky-header.shrunk H1 {
  Schriftgröße: 20px;
}

.Sticky-header.shrunk nav a {
  Schriftgröße: 16px;
}

JavaScript, um die Klasse zum Scrollen hinzuzufügen

 const header = document.querySelector ('. Sticky-Header');
lastScrolltop = 0;

window.addeventListener ('scroll', () => {
  const currentscrolltop = fenster.scrolly;

  // nur beim Scrollen auslösen
  if (currentscrolltop> lastScrolltop && currentscrolltop> 50) {
    Header.ClassList.add ('Shrunk');
  } anders {
    Header.ClassList.remove ('Shrunk');
  }

  lastScrolltop = currentscrolltop;
});

? Dieser Ansatz ist zuverlässig und weit verbreitet. Der Header schrumpft beim Scrollen nach über 50px und erweitert sich beim Scrollen zurück.

✅ 4. optionale Verbesserungen

• Verwenden Sie will-change: transform oder transform: scale() für glatte Animationen.
• Fügen Sie requestAnimationFrame hinzu, um die Bildlaufleistung zu optimieren.
• Bei Bedarf Scroll -Events entlarven oder drosseln.

Beispiel mit transform für eine glattere Skalierung:

 .Sticky-header.shrunk {
  Transformation: Skala (0,95);
  Transform-Origin: Top Center;
}

Aber seien Sie vorsichtig - transform kann das Layout beeinflussen. Halten Sie sich an Änderungen padding und font-size für sicherere Ergebnisse.

Zusammenfassung

• Verwenden Sie position: sticky für Klebrigkeit.
• Für moderne Browser: Probieren Sie CSS-scrollgesteuerte Animationen ( animation-timeline: view() ).
• Für die Produktion: Verwenden Sie CSS -Übergänge JavaScript, um eine .shrunk -Klasse auf Scroll zu umschalten.
• Testen Sie immer auf mobilen und unterschiedlichen Bildschirmgrößen.

Grundsätzlich handelt es sich um eine Kombination aus klebrigen Positionierung, reibungslosen Übergängen und Scroll -Erkennung - einfach, aber effektiv.

Das obige ist der detaillierte Inhalt vonWie erstelle ich einen klebrigen Header, der auf Scrollen mit CSS schrumpft?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!