JS realisiert Spezialeffekte der Webseiten-Navigationsleiste

In diesem Artikel erfahren Sie mehr über einen praktischen Webnavigationsleisteneffekt, der mit nativem JS implementiert wurde. Beim Scrollen der Seite ändert sich die Navigationsleiste. Der Effekt ist wie folgt:

Nachfolgend sehen Sie die Code-Implementierung. Sie können diese gerne kopieren, einfügen und sammeln.

<!DOCTYPE html>
<html lang="de">
 
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Natives JS zum Erzielen von Spezialeffekten in der Webnavigationsleiste</title>
    <Stil>
        * {
            Rand: 0;
            Polsterung: 0;
            Box-Größe: Rahmenbox;
            Zeilenumbruch: Wort umbrechen;
            Schriftfamilie: „Microsoft YaHei“, serifenlos;
        }
 
        Körper {
            Hintergrund: #000;
            Mindesthöhe: 200vh;
        }
 
        Kopfzeile {
            Position: fest;
            oben: 0;
            links: 0;
            Breite: 100 %;
            Anzeige: Flex;
            Elemente ausrichten: zentrieren;
            Inhalt ausrichten: Abstand dazwischen;
            Übergang: 0,6 s;
            Polsterung: 40px 100px;
            Z-Index: 2;
        }
 
        header.sticky {
            Polsterung: 5px 100px;
            Hintergrund: #fff;
        }
 
        Header .logo {
            Position: relativ;
            Schriftstärke: 700;
            Farbe: #fff;
            Textdekoration: keine;
            Schriftgröße: 2em;
            Texttransformation: Großbuchstaben;
            Buchstabenabstand: 2px;
            Übergang: 0;
        }
 
        Kopfzeile ul {
            Position: relativ;
            Anzeige: Flex;
            Inhalt ausrichten: zentriert;
            Elemente ausrichten: zentrieren;
        }
 
        Kopfzeile ul li {
            Position: relativ;
            Listenstil: keiner;
        }
 
        Header ul li a {
            Position: relativ;
            Rand: 0 15 px;
            Textdekoration: keine;
            Farbe: #fff;
            Buchstabenabstand: 2px;
            Schriftstärke: 500px;
            Übergang: 0,5 s;
        }
 
 
        .banner {
            Position: relativ;
            Breite: 100 %;
            Höhe: 100vh;
            Hintergrund: url(bg.jpg);
            Hintergrundgröße: Abdeckung;
        }
 
        Kopfzeile.sticky .logo,
        header.sticky ul li a {
            Farbe: #000;
        }
    </Stil>
</Kopf>
 
<Text>
    <Kopfzeile>
        <a href="#" class="logo">Logo</a>
        <ul>
            <li><a href="#" >Startseite</a></li>
            <li><a href="#" >Über</a></li>
            <li><a href="#" >Dienstleistungen</a></li>
            <li><a href="#" >Werke</a></li>
            <li><a href="#" >Kontakt</a></li>
        </ul>
    </header>
    <Abschnitt Klasse="Banner"></Abschnitt>
    <Skript>
        window.addEventListener('scroll', () => {
            let header = document.querySelector('header')
            // Wichtige Eigenschaften header.classList.toggle('sticky', window.scrollY > 0)
        })
    </Skript>
</body>
 
</html>

Nachfolgend sehen Sie das im Code referenzierte Bild bg.jpg

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.

Das könnte Sie auch interessieren:

JS realisiert den Effekt der Hervorhebung der Navigationsleiste nach Auswahl des aktuellen Menüs
CSS3+Js zur Implementierung einer reaktionsfähigen Navigationsleiste
Navigationsleiste der Startseite DIV+CSS+JS [Codebeispiel]
Implementierung eines schwebenden Popup-Menüs in der Navigationsleiste basierend auf JS-Code
Beispiel für die Methode „Navigationsleiste hervorheben (Routenmenü hervorheben)“ von Vuejs
JS+CSS realisiert den Effekt der dynamischen Scroll-Navigationsleiste, wenn die Maus darüber gleitet
Detaillierte Erklärung zur Verwendung der Bootstrap-Navigationsleisten-JS-Komponente
JavaScript-implementierte Navigationsleiste, die dynamisch scrollt, wenn die Maus darüber bewegt wird
js, um die Funktion der horizontalen Drag-Navigationsleiste zu erreichen
Reines JS, um einen elastischen Navigationsleisteneffekt zu erzielen

<<: Auszeichnungssprache - Bildersetzung

>>: Docker stellt über einen Port eine Verbindung zu einem Container her