JavaScriptでフロアナビゲーションエフェクトを作成するプロセスの詳細な説明

<div id="box" class="box">
    <ul class="リスト">
        <li class="content-part" data-n="列 1">列 1</li>
        <li class="content-part" data-n="列 2">列 2</li>
        <li class="content-part" data-n="列 3">列 3</li>
        <li class="content-part" data-n="列 4">列 4</li>
        <li class="content-part" data-n="列 5">列 5</li>
    </ul>
</div>
<div class="left">
    <ul id="左リスト">
        <li data-n="列 1">列 1</li>
        <li data-n="列 2">列 2</li>
        <li data-n="列 3">列 3</li>
        <li data-n="列 4">列 4</li>
        <li data-n="列 5">列 5</li>
    </ul>
</div>

<スタイル>
    * {
        マージン: 0;
        パディング: 0;
    }
    本文.box{
        幅: 1200ピクセル;
    }
    本文.box{
        マージン: 0 自動;
    }
    ul {
        リストスタイル: なし;
    }
    本文.box ul li {
        高さ: 800ピクセル;
        背景色: シルバー;
        下マージン: 20px;
        フォントサイズ: 30px;
        フォントの太さ: 太字;
    }
    本文.left{
        位置: 固定;
        左: 20px;
        下: 100px;
        幅: 100ピクセル;
        高さ: 250px;
        上位: 50%;
        上マージン: -125px;
        背景色: シルバー;
    }
    本文.leftulli{
        高さ: 50px;
        行の高さ: 50px;
        テキスト配置: 中央;
        カーソル: ポインタ;
    }
    本文.current{
        色: #fff;
        背景色: トマト;
    }
</スタイル>

var oList = document.getElementById('左リスト');
// クリックイベントデリゲート oList.onclick = function (e) {
    if (e.target.tagName.toLowerCase() == 'li') {
        // data-n の値を取得します。 var n = e.target.getAttribute('data-n');
        // [] 属性セレクター var contentPart = document.querySelector('.content-part[data-n=' + n + ']');
        //スクロールを設定します。documentElement.scrollTop = contentPart.offsetTop;
    }
}

//ページがスクロールすると、左側のボックス列の背景もそれに応じて変化します var contents = document.querySelectorAll('.content-part');
var lis = document.querySelectorAll('#left-list li');
var offsetTopArr = [];
(var i = 0; i < コンテンツの長さ; i++) {
    offsetTopArr.push(contents[i].offsetTop);
}
// 比較の便宜上、無限 offsetTopArr.push(Infinity); を追加します。
// スクロールをモニターする var nowFloor = -1;
window.onscroll = 関数 (e) {
    var nowScrollTop = document.documentElement.scrollTop;
    // break の i 値はボックス配列の添え字です for (var i = 0; i < offsetTopArr.length; i++) {
        nowScrollTop >= offsetTopArr[i] && nowScrollTop < offsetTopArr[i + 1] の場合 {
            壊す;
        }
    }
    // フロアが等しくないので、スタイルを変更します if (nowFloor != i) {
        現在のフロア = i;
        (var j = 0; j < lis.length; j++) の場合 {
            もし（j == i）{
                // 現在のフロアにスタイルを追加します lis[j].className = 'current';
            } それ以外 {
                // 他のフロアのスタイルを削除します lis[j].className = '';
            }
        }
    }
}