HTML + CSS + JS realisiert den Scroll-Gradienteneffekt der Navigationsleiste

HTML + CSS + JS realisiert den Scroll-Gradienteneffekt der Navigationsleiste

Erster Blick auf die Wirkung:

Bildbeschreibung hier einfügen

erreichen:

1. Definieren Sie die Textbeschriftung der Navigationsleiste:

<div Klasse="Sie">
        <sapn class="logo"> Nordlichter. </sapn>
        <ul Klasse="biao">
        <li><a href="#"><a href="#">Startseite</a></li>
        <li><a href="#">Persönliches Profil</a></li>
        <li><a href="#">Artikel</a></li>
        <li><a href="#">Nachrichtenbrett</a></li>
        <li><a href="#">Freundeslinks</a></li>
        </ul>
    </div>

2. Der Gesamtstil der Navigationsleiste:

.tou{
             Position: fest;
             oben: 0;
             links: 0;
             Polsterung: 25px 100px;
             Breite: 100 %;
             Anzeige: Flex;
             Inhalt ausrichten: Abstand dazwischen;
             Elemente ausrichten: zentrieren;
            Übergang: 0,5 s;
         }

Übergang
3. Der Stil des Northern Lights-Logos:

 .Logo{
             Position: relativ;
             Schriftgröße: 22px;
             Schriftstärke: 900;
             Buchstabenabstand: 1px;
             Farbe: RGB (28, 36, 148);
         }

letter-spacing: Textabstand (Buchstabenabstand)

4. Positionieren Sie links neben dem Text ein Bild für das Nordlicht-Logo:

.logo::vorher{
            Inhalt: '';
            Position: absolut;
            links: -50px;
            oben: -15px;
            Breite: 50px;
            Höhe: 50px;
            Hintergrundbild: URL (logo.png);
            Hintergrundgröße: 100 %;
         }

5. Einige Stile der Navigationsbeschriftungen auf der rechten Seite werden nicht im Detail beschrieben, schließlich sind die Stile bei jedem anders ~:

.biao{
             Position: relativ;
             Anzeige: Flex;
             Inhalt ausrichten: zentriert;
             Inhalt ausrichten: zentriert;
            Listenstil: keiner;
            
         }
        .biao li{
             Position: relativ;
         }
        .biao a{
             Position: relativ;
             Rand: 0 10px;
             Schriftgröße: 18px;
             Schriftfamilie: „Fangsong“;
             Schriftstärke: fett;
             Farbe: RGB (28, 36, 148);
             Textdekoration: keine;

         }

6. Beim Scrollen auf der Seite werden der Stil der Navigationsleiste und die Polsterung kleiner, die Schriftfarbe ändert sich und eine blaue Hintergrundfarbe wird angezeigt:

 .bian{
            Polsterung: 15px 100px;
            Hintergrundfarbe: rgb(71, 105, 219);
        }
        .bian .logo,.tou.bian a{
            Farbe: RGB (252, 247, 247);
        }

7. Einfaches js, Implementierungsteil:
Der Erste:

window.addEventListener('scrollen',Funktion(){
            Lassen Sie tou = document.querySelector('.tou');
           wenn(window.scrollY>0)
            {
                tou.classList.add("bian");
            }anders{
                tou.classList.remove("bian");
            }
        })

Die zweite Methode: direkt so:

window.addEventListener('scrollen',Funktion(){
            Lassen Sie tou = document.querySelector('.tou');    
            tou.classList.toggle("bian",window.scrollY>0);

        })

erklären:
scrollY-Eigenschaft:
Die schreibgeschützte scrollY-Eigenschaft der Window-Schnittstelle gibt die Anzahl der Pixel zurück, um die das Dokument derzeit vertikal gescrollt wird.

classList -Attribut:
add(class1, class2, …) fügt einem Element einen oder mehrere Klassennamen hinzu. Wenn der angegebene Klassenname bereits existiert, wird er nicht hinzugefügt .
remove(class1, class2, …) Entfernt einen oder mehrere Klassennamen aus einem Element.
toggle(class, true|false) Der erste Parameter ist der Name der Klasse, die entfernt werden soll, wenn sie bereits existiert , und gibt „false“ zurück. Wenn der Klassenname nicht existiert, wird er dem Element hinzugefügt und „true“ zurückgegeben. Der zweite ist ein optionaler Parameter, ein Boolescher Wert , mit dem festgelegt wird , ob das Element gezwungen wird, die Klasse hinzuzufügen oder zu entfernen , unabhängig davon, ob der Klassenname vorhanden ist.

Also:
Die erste Methode zum Schreiben von js besteht darin, die Klasse .biao hinzuzufügen, um einen Farbverlaufseffekt zu erzielen, wenn der Bildlauf > 0 ist, und die Klasse .biao zu entfernen, um zum ursprünglichen Zustand zurückzukehren, wenn der Bildlauf <= 0 ist.
Das zweite ist eine Boolesche Wertbeurteilung. Wenn der Bildlauf > 0 ist, wird die Klasse .biao zwangsweise hinzugefügt, und wenn der Bildlauf <= 0 ist, wird die Klasse .biao entfernt.

Vollständiger Code:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
    <Stil>
        *{
            Rand: 0;
            Polsterung: 0;
            Box-Größe: Rahmenbox;
            
        }
        Körper{
            Höhe: 200vh;
            
        }
        .tou{
             Position: fest;
             oben: 0;
             links: 0;
             Polsterung: 25px 100px;
             Breite: 100 %;
             Anzeige: Flex;
             Inhalt ausrichten: Abstand dazwischen;
             Elemente ausrichten: zentrieren;
            Übergang: 0,5 s;
         }
        .Logo{
             Position: relativ;
             Schriftgröße: 22px;
             Schriftstärke: 900;
             Buchstabenabstand: 1px;
             Farbe: RGB (28, 36, 148);
         }
         .logo::vorher{
            Inhalt: '';
            Position: absolut;
            links: -50px;
            oben: -15px;
            Breite: 50px;
            Höhe: 50px;
            Hintergrundbild: URL (logo.png);
            Hintergrundgröße: 100 %;
         }
         .biao{
             Position: relativ;
             Anzeige: Flex;
             Inhalt ausrichten: zentriert;
             Inhalt ausrichten: zentriert;
            Listenstil: keiner;
            
         }
        .biao li{
             Position: relativ;
         }
        .biao a{
             Position: relativ;
             Rand: 0 10px;
             Schriftgröße: 18px;
             Schriftfamilie: „Fangsong“;
             Schriftstärke: fett;
             Farbe: RGB (28, 36, 148);
             Textdekoration: keine;

         }
          
        .bian{
            Polsterung: 15px 100px;
            Hintergrundfarbe: rgb(71, 105, 219);
        }
        .bian .logo,.tou.bian a{
            Farbe: RGB (252, 247, 247);
        }
       /* Hintergrundbildstil */
        .bjimg {
      Position: fest;
      oben: 0;
      links: 0;
      Breite: 100 %;
      Höhe: 100%;
      Mindestbreite: 1000px;
      Z-Index: -10;
      Zoom: 1;
      Hintergrundfarbe: #fff;
      Hintergrundbild: url(11.jpg) ;
      Hintergrundwiederholung: keine Wiederholung;
      Hintergrundgröße: Abdeckung;
      -webkit-Hintergrundgröße: Abdeckung;
      -o-Hintergrundgröße: Abdeckung;
      Hintergrundposition: Mitte 0;
    }

    </Stil>
</Kopf>
<Text>
    <!-- Hintergrundbild -->
    <div Klasse="bjimg"></div>

   <!-- Navigationsleiste -->
    <div Klasse="Sie">
        <sapn class="logo"> Nordlichter. </sapn>
        <ul Klasse="biao">
        <li><a href="#"><a href="#">Startseite</a></li>
        <li><a href="#">Persönliches Profil</a></li>
        <li><a href="#">Artikel</a></li>
        <li><a href="#">Nachrichtenbrett</a></li>
        <li><a href="#">Freundeslinks</a></li>
        </ul>
    </div>
    <Skript>
        window.addEventListener('scrollen',Funktion(){
            Lassen Sie tou = document.querySelector('.tou');
            
           
           /* tou.classList.toggle("bian",window.scrollY>0); */
           wenn(window.scrollY>0)
            {
                tou.classList.add("bian");
            }anders{
                tou.classList.remove("bian");
            }
        })
    </Skript>
</body>
</html>

Zusammenfassen:

Dies ist das Ende dieses Artikels darüber, wie Sie mit HTML+CSS+JS den Scroll-Gradient-Effekt der Navigationsleiste erzielen. Weitere verwandte HTML+CSS+JS-Navigationsleisten-Scroll-Gradient-Inhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder stöbern Sie weiter unten in den verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<:  CSS implementiert die Funktion zum Ausblenden des Suchfelds (Animation in Vorwärts- und Rückwärtssequenz).

>>:  N Möglichkeiten, mit CSS ein zweispaltiges Layout zu erreichen

Artikel empfehlen

Zwei Möglichkeiten, das Löschen des Eingabetext-Eingabecaches in HTML zu verhindern

Die meisten Browser speichern die Eingabewerte st...

Methode zum dynamischen Laden von Geojson basierend auf Vue+Openlayer

Laden eines oder mehrerer Features <Vorlage>...

Das einfachste Tutorial zur Sicherung und Wiederherstellung von MySQL-Daten aller Zeiten (Teil 2) (Teil 36)

Datensicherung und Wiederherstellung Teil 2, wie ...

Fehlerbehebung bei der Ursache des 502 Bad Gateway-Fehlers auf dem Nginx-Server

Der Server meldet einen Fehler 502 beim Synchroni...

So installieren Sie Element UI und verwenden Vektorgrafiken in vue3.0

Hier konzentrieren wir uns nur auf die Installati...

Einführung in das Enctype-Attribut des Form-Tags und seine Anwendungsbeispiele

Enctype: Gibt den Kodierungstyp an, der vom Browse...

Der gesamte Prozess der Installation und Konfiguration von Harbor1.7 auf CentOS7.5

1. Laden Sie die erforderlichen Pakete herunter w...

Tomcat-Sicherheitsspezifikationen (Tomcat-Sicherheitsverstärkung und -spezifikationen)

Tomcat ist ein Open-Source-Webserver. Das auf Tom...

Detaillierte Erläuterung der Prinzipien und der Verwendung der MySQL-Master-Slave-Replikation und der Lese-/Schreibtrennung

Dieser Artikel veranschaulicht anhand von Beispie...

Erfahren Sie mehr über JavaScript-Iteratoren

Inhaltsverzeichnis Einführung Wie sieht ein Itera...

Detaillierte Erläuterung von CSS3 zum Erzielen eines reaktionsschnellen Akkordeoneffekts

Ich habe mir vor kurzem ein Video von einem Auslä...

Detaillierte Erläuterung der Kommunikation zwischen nicht übergeordneten und untergeordneten Komponenten in Vue3

Inhaltsverzeichnis Erste Methode App.vue Startsei...

Beispielmethode zum Suchen von Schlüsselwörtern und deren vorangehenden und nachfolgenden Informationen in Linux-Protokollen

Bei der täglichen Arbeit müssen wir häufig Protok...

So deinstallieren Sie das native OpenJDK von Linux und installieren Sun JDK

Siehe: https://www.jb51.net/article/112612.htm Üb...

Wie man mit React elegant CSS schreibt

Inhaltsverzeichnis 1. Inline-Stile 2. Importmetho...