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

Prinzip der MySQL-Paging-Analyse und Effizienzverbesserung

Prinzip der MySQL-Paging-Analyse und Effizienzver...

So verhindern Sie das Flashen von Vue in kleinen Projekten

Zusammenfassung HTML: Element plus V-Umhang CSS: ...

So lösen Sie die Hintergrundkachelung und den Rahmenbruch von CSS-Style-Div oder -Li in IE6

Die Lösung für die Hintergrundkachelung oder Rahme...

MySQL Serie 14 MySQL Hochverfügbarkeitsimplementierung

1. MHA Durch die Überwachung des Masterknotens ka...

Installations-Tutorial zur MySQL 5.7.17 Zip-Paketversion unter Win10

Das Installationstutorial für mysql5.7.17 wird Ih...

MySQL 8.0 MIT Abfragedetails

Inhaltsverzeichnis Informationen zu WITH-Abfragen...

Umfassende Website-Bewertungslösung

<br />Manchmal werden Ihnen möglicherweise F...

border-radius-Methode zum Hinzufügen abgerundeter Ränder zu Elementen

border-radius:10px; /* Alle Ecken sind mit einem ...

Lösung für den Fehler beim Mounten des freigegebenen Docker-Verzeichnisses unter Windows 10

Ursache Beim Ausführen des Docker-Skripts tritt e...

Detaillierte Erklärung zur SQL-Injection - Sicherheit (Teil 2)

Sollte dieser Artikel Fehler enthalten oder du An...

Beispielcode zum Setzen von Hotlinks und Koordinatenwerten für Webbilder

Manchmal müssen Sie mehrere Bereiche auf einem Bi...

Das Linux-System verbietet den Remote-Login-Befehl des Root-Kontos

PS: So deaktivieren Sie die Remote-Anmeldung des ...

Detaillierte Beispiele zur Verwendung der JavaScript-Ereignisdelegierung (Proxy)

Inhaltsverzeichnis Einführung Beispiel: Ereignisd...

Docker-Praxis: Python-Anwendungscontainerisierung

1. Einleitung Container nutzen einen Sandbox-Mech...

Probleme und Lösungen bei der Installation und Verwendung von VMware

Die virtuelle Maschine wird verwendet oder es kan...