Verwenden Sie Smart CSS, um Stile basierend auf der Scrollposition des Benutzers anzuwenden

Indem wir den aktuellen Bildlaufversatz zu den Attributen des HTML-Elements hinzufügen, können wir die Elemente auf der Seite basierend auf der aktuellen Bildlaufposition gestalten. Wir können dies verwenden, um eine Navigationskomponente zu erstellen, die oben auf der Seite schwebt.

Dies ist das HTML, das wir verwenden werden. Die Komponente <header> ist diejenige, die beim Scrollen nach unten immer oben auf der Seite schweben soll.

<header>Ich bin der Seitenkopf</header>
<p>Hier gibt es jede Menge Inhalt...</p>
<p>Weitere schöne Inhalte...</p>
<p>Inhalt...</p>

Zuerst warten wir auf das „Scroll“-Ereignis im Dokument und jedes Mal, wenn der Benutzer einen Bildlauf durchführt, erhalten wir den aktuellen ScrollY-Wert.

document.addEventListener('scroll', () => {
  Dokument.documentElement.dataset.scroll = Fenster.scrollY;
});

Wir speichern die Scrollposition im Datenattribut des HTML-Elements. Wenn Sie sich das DOM mit den Entwicklertools ansehen, sieht es folgendermaßen aus: <html data-scroll="0">
Jetzt können wir diese Eigenschaft verwenden, um Elemente auf der Seite zu gestalten.

/* Stellen Sie sicher, dass das Header-Tag immer höher als 3em ist */
Kopfzeile {
  Mindesthöhe: 3em;
  Breite: 100 %;
  Hintergrundfarbe: #fff;
}

/* Dieselbe Höhe wie die Mindesthöhe der Kopfzeile oben auf der Seite beibehalten */
html:nicht([data-scroll='0']) body {
  Polsterung oben: 3em;
}

/* Schalten Sie das Header-Tag in den festen Positionierungsmodus und fixieren Sie es oben auf der Seite*/
html:nicht([data-scroll='0']) header {
  Position: fest;
  oben: 0;
  Z-Index: 1;

  /* Die Box-Shadow-Eigenschaft kann den Schwebeeffekt verstärken*/
  Kastenschatten: 0 0 .5em rgba(0, 0, 0, .5);
}

Das ist im Wesentlichen alles: Wenn der Benutzer nach unten scrollt, löst sich das Header-Tag automatisch von der Seite und schwebt über dem Inhalt. Der JavaScript-Code kümmert sich nicht darum, seine Aufgabe besteht darin, den Scroll-Offset in das Datenattribut einzufügen. Das ist perfekt, da keine enge Kopplung zwischen JavaScript und CSS besteht.

Es gibt jedoch noch einige Bereiche, die verbessert werden können, vor allem im Hinblick auf die Leistung.

Zuerst müssen wir das JavaScript-Skript ändern, um der Situation gerecht zu werden, dass die Bildlaufposition beim Laden der Seite nicht oben ist. In solchen Fällen wird das Header-Tag falsch gerendert.

Wenn die Seite geladen wird, müssen wir schnell den aktuellen Scroll-Offset abrufen. Dadurch wird sichergestellt, dass wir immer mit dem aktuellen Status der Seite synchronisiert sind.

// Lesen Sie die Scrollposition der aktuellen Seite und speichern Sie sie in der Dateneigenschaft des Dokuments // damit wir sie in unserem Stylesheet verwenden können const storeScroll = () => {
  Dokument.documentElement.dataset.scroll = Fenster.scrollY;
}

// Auf Scroll-Ereignisse warten document.addEventListener('scroll', storeScroll);

// Aktualisiere die Scrollposition, wenn die Seite zum ersten Mal geöffnet wird storeScroll();

Als Nächstes sehen wir uns einige Leistungsverbesserungen an. Wenn wir die ScrollY-Position erhalten möchten, muss der Browser die Position jedes Elements auf der Seite berechnen, um sicherzustellen, dass er die richtige Position zurückgibt. Es wäre am besten, wenn wir es nicht zwingen würden, bei jedem Scrollen einen Wert anzunehmen.

Dazu benötigen wir eine Debounce-Methode, die unsere Abrufanfragen in die Warteschlange stellt, bis der Browser bereit ist, den nächsten Frame zu zeichnen. Zu diesem Zeitpunkt hat er bereits die Positionen aller Elemente auf der Seite berechnet, sodass er nicht immer wieder die gleiche Arbeit ausführen muss.

// Die Entprellfunktion akzeptiert eine benutzerdefinierte Funktion als Parameter const entprellen = (fn) => {

  // Dies enthält einen Verweis auf requestAnimationFrame, sodass wir es jederzeit stoppen können, wenn wir let frame möchten.
  
  // Die Entprellfunktion gibt eine neue Funktion zurück, die mehrere Parameter akzeptieren kann return (...params) => {
    
    // Wenn der Wert von Frame vorhanden ist, lösche den entsprechenden Rückruf if (Frame) { 
      Animationsrahmen abbrechen(Rahmen);
    }

    // Lassen Sie unseren Rückruf ausführen, wenn der Browser das nächste Frame aktualisiert frame = requestAnimationFrame(() => {
      
      // Führen Sie unsere benutzerdefinierte Funktion aus und übergeben Sie unsere Parameter fn(...params);
    });

  } 
};

// Liest die Scrollposition aus und speichert sie im Datenattribut
// damit wir es in unseren Stylesheets verwenden können
const storeScroll = () => {
  Dokument.documentElement.dataset.scroll = Fenster.scrollY;
}

// Auf neue Scroll-Ereignisse warten, hier entprellen wir unsere `storeScroll`-Funktion
document.addEventListener('scroll', entprellung(storeScroll));

// Scrollposition zum ersten Mal aktualisieren
speichernScrollen();

Indem wir das Ereignis als passiv markieren, können wir dem Browser mitteilen, dass unser Scroll-Ereignis nicht durch Touch-Interaktionen blockiert wird (wie beispielsweise bei der Interaktion mit Plugins wie Google Maps). Dadurch kann der Browser die Seite sofort scrollen, da er nun weiß, dass das Ereignis nicht blockiert wird.

document.addEventListener('scroll', entprellung(storeScroll), { passiv: true });

Nachdem das Leistungsproblem behoben wurde, können wir nun JavaScript stabil nutzen, um die abgerufenen Daten in CSS einzuspeisen und sie zum Stylen von Elementen auf der Seite zu verwenden.

Live-Demo auf CodePen

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

<<: Verwenden Sie js, um js-Funktionen in Iframe-Seiten aufzurufen

>>: Analyse mehrerer Situationen, in denen der MySQL-Index fehlschlägt

Erläuterung des React+TypeScript-Projektaufbaufalls

Verwenden Sie Smart CSS, um Stile basierend auf der Scrollposition des Benutzers anzuwenden

Erläuterung des React+TypeScript-Projektaufbaufalls

So verwenden Sie Zen-Codierung in Dreamweaver

Detailliertes Tutorial zur Installation von MySQL auf CentOS 6.9

Hinweise zur IE8-Kompatibilität, die mir aufgefallen sind

Detaillierte Erklärung zur Verwendung von Vue+Element zum Implementieren des Tags oben auf der Seite

So verwenden Sie Shell-Skripte in Node

Vue verwendet Canvas-Handschrifteingabe, um Chinesisch zu erkennen

VirtualBox CentOS7.7.1908 Python3.8 Build Scrapy-Entwicklungsumgebung [grafisches Tutorial]

Lösen Sie das Problem der Containerverwaltung mit Docker Compose

Spezielle Befehle in der MySql-Datenbankabfrage

Artikel empfehlen

Schritte zum Öffnen des MySQL-Binlogs

Tägliches automatisches Backup der MySQL-Datenbank mit mysqldump in Centos7 schreiben

Designtheorie: Menschenorientiertes Green Design

Beheben Sie das Problem, dass sich die Ränder des Suchfelds und der Suchschaltfläche nicht überlappen können

Installationsprozess des mysql5.6.8-Quellcodes

14 Techniken für leistungsstarke Websites

So kopieren Sie eine MySQL-Tabelle

So verwenden Sie das Flex-Layout, um ein Scrollen des festen Inhaltsbereichs im Kopf zu erreichen

Einführung in die grafischen Kompositions- und Satzfunktionen des Webdesigns

Die Eltern-Kind-Knoten-Zuordnung des El-Tree-Mehrfachauswahlbaums (Kontrollkästchen) des Elements ist nicht zugeordnet

So löschen Sie den MySQL 8.0-Dienst vollständig unter Linux

Automatisiertes Frontend-Deployment basierend auf Docker, Nginx und Jenkins

Beispiele für die Implementierung und Verwendung von geplanten MySQL-Aufgaben

Zusammenfassung häufig verwendeter MySQL-Befehle im Linux-Betriebssystem

Detaillierte Erklärung zur Verwendung des MySQL-Sicherungsskripts mysqldump