Detaillierte Erläuterung des Prozesses zum Erstellen von Bodennavigationseffekten mit JavaScript

<div id="Box" Klasse="Box">
    <ul Klasse="Liste">
        <li class="content-part" data-n="Spalte 1">Spalte 1</li>
        <li class="content-part" data-n="Spalte 2">Spalte 2</li>
        <li class="content-part" data-n="Spalte Drei">Spalte Drei</li>
        <li class="content-part" data-n="Spalte 4">Spalte 4</li>
        <li class="content-part" data-n="Spalte Fünf">Spalte Fünf</li>
    </ul>
</div>
<div Klasse="links">
    <ul id="linke-Liste">
        <li data-n="Spalte 1">Spalte 1</li>
        <li data-n="Spalte 2">Spalte 2</li>
        <li data-n="Spalte Drei">Spalte Drei</li>
        <li data-n="Spalte 4">Spalte 4</li>
        <li data-n="Spalte Fünf">Spalte Fünf</li>
    </ul>
</div>

<Stil>
    * {
        Rand: 0;
        Polsterung: 0;
    }
    Körper .box {
        Breite: 1200px;
    }
    Körper .box {
        Rand: 0 automatisch;
    }
    ul {
        Listenstil: keiner;
    }
    Körper .box ul li {
        Höhe: 800px;
        Hintergrundfarbe: Silber;
        Rand unten: 20px;
        Schriftgröße: 30px;
        Schriftstärke: fett;
    }
    Körper .links {
        Position: fest;
        links: 20px;
        unten: 100px;
        Breite: 100px;
        Höhe: 250px;
        oben: 50 %;
        Rand oben: -125px;
        Hintergrundfarbe: Silber;
    }
    Körper .links ul li {
        Höhe: 50px;
        Zeilenhöhe: 50px;
        Textausrichtung: zentriert;
        Cursor: Zeiger;
    }
    Körper .aktuell {
        Farbe: #fff;
        Hintergrundfarbe: Tomate;
    }
</Stil>

var oList = document.getElementById('linke Liste');
// Klickereignisdelegat oList.onclick = function (e) {
    wenn (e.target.tagName.toLowerCase() == 'li') {
        // Den Wert von data-n abrufen var n = e.target.getAttribute('data-n');
        // [] Attributselektor var contentPart = document.querySelector('.content-part[data-n=' + n + ']');
        //Bildlauf festlegen document.documentElement.scrollTop = contentPart.offsetTop;
    }
}

//Beim Scrollen der Seite ändert sich der Hintergrund der Box-Spalte links entsprechend var contents = document.querySelectorAll('.content-part');
var lis = document.querySelectorAll('#left-list li');
var offsetTopArr = [];
für (var i = 0; i < Inhalt.Länge; i++) {
    offsetTopArr.push(Inhalt[i].offsetTop);
}
// Zum einfacheren Vergleichen fügen Sie infinite offsetTopArr.push(Infinity) hinzu;
// Monitor-Scrollen var nowFloor = -1;
fenster.onscroll = Funktion (e) {
    var nowScrollTop = document.documentElement.scrollTop;
    // Der i-Wert von break ist der Index des Box-Arrays für (var i = 0; i < offsetTopArr.length; i++) {
        wenn (jetztScrollTop >= offsetTopArr[i] und jetztScrollTop < offsetTopArr[i + 1]) {
            brechen;
        }
    }
    // Die Stockwerke sind nicht gleich, ändere den Stil if (nowFloor != i) {
        jetztFloor = i;
        für (var j = 0; j < lis.length; j++) {
            wenn (j == i) {
                // Stil zum aktuellen Stockwerk hinzufügen lis[j].className = 'current';
            } anders {
                //Entfernen Sie die Stile anderer Etagen lis[j].className = '';
            }
        }
    }
}