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

Detaillierter Code zur Implementierung einer 3D-Tag-Cloud in Vue

Vorschau: Code: Seitenabschnitte: <Vorlage>...

Zusammenfassung der Vue3-Slot-Nutzung

Inhaltsverzeichnis 1. Einführung in den V-Slot 2....

Tiefgreifendes Verständnis der MySQL-Selbstverbindung und Join-Assoziation

1. MySQL-Selbstverbindung MySQL muss beim Abfrage...

So verwenden Sie den Tencent-Schieberegler-Verifizierungscode im Vue3+Vue-cli4-Projekt

Einführung: Im Vergleich zu herkömmlichen Bildver...

Durch reines CSS können untergeordnete Elemente die Breitenbeschränkung übergeordneter Elemente durchbrechen.

In Schreibstilen können wir diese Situation oft s...

Implementierung der virtuellen React-Liste

Inhaltsverzeichnis 1. Hintergrund 2. Was ist eine...

Lösung für 700 % CPU-Auslastung eines Linux-Prozesses, der nicht beendet werden kann

Inhaltsverzeichnis 1. Problemerkennung 2. Detaill...

Detaillierte Erläuterung des Installationsprozesses von Jenkins auf CentOS 7

Installieren Sie Jenkins über Yum 1. Installation...

Teilen Sie 20 JavaScript-Einzeilencodes

Inhaltsverzeichnis 1. Holen Sie sich den Wert des...

Lösen Sie das Problem, dass die Zeitzone in der Linux-Umgebung nicht eingestellt werden kann

Beim Ändern der Zeitzone unter Linux ist es immer...

So verwenden Sie die REM-Anpassung in Vue

1. Entwicklungsumgebung vue 2. Computersystem Win...

Erfahren Sie mehr über die am häufigsten verwendeten JavaScript-Ereignisse

Inhaltsverzeichnis JavaScript-Ereignisse: Häufig ...

Detaillierte Erklärung zur Verbindung mit einer MySQL-Datenbank mit Java in IntelliJ IDEA

1. MySQL-Datenbank herunterladen und installieren...

Verwendung von HTML zur Implementierung eines Betrugsschemas auf einer Abstimmungswebsite, das IP einschränkt

Dies ist ein Betrugsschema für Abstimmungswebsite...

Die große Rolle von HTML-Meta

Es gibt zwei Metaattribute: Name und http-equiv. D...