JS电梯导航的实现示例

 // 获取所有的导航链接
        const links = document.querySelectorAll('.elevator a');
        // 获取所有的内容区块
        const sections = document.querySelectorAll('.section');
        // 监听窗口滚动事件
        window.addEventListener('scroll', function () {
            // 获取滚动条的位置
            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            // 遍历所有的内容区块
            sections.forEach(function (section) {
                // 获取内容区块的位置信息
                const offsetTop = section.offsetTop;
                const offsetHeight = section.offsetHeight;
                // 判断当前内容区块是否在可视范围内
                if (scrollTop >= offsetTop && scrollTop < offsetTop + offsetHeight) {
                    // 如果在可视范围内，则将对应的导航链接设置为 active 状态
                    links.forEach(function (link) {
                        if (link.getAttribute('href') === '#' + section.getAttribute('id')) {
                            link.classList.add('active');
                        } else {
                            link.classList.remove('active');
                        }
                    });
                }
            });
        });
        // 监听所有的导航链接的点击事件
        links.forEach(function (link) {
            link.addEventListener('click', function (event) {
                event.preventDefault();
                // 获取目标内容区块的位置信息
                const targetId = link.getAttribute('href');
                const targetSection = document.querySelector(targetId);
                const targetOffsetTop = targetSection.offsetTop;
                // 使用动画滑动到目标内容区块
                window.scrollTo({
                    top: targetOffsetTop,
                    behavior: 'smooth'
                });
            });
        });

  <div class="elevator">
        <ul>
            <li><a href="#section1" rel="external nofollow" >Section 1</a></li>
            <li><a href="#section2" rel="external nofollow" >Section 2</a></li>
            <li><a href="#section3" rel="external nofollow" >Section 3</a></li>
            <li><a href="#section4" rel="external nofollow" >Section 4</a></li>
            <li><a href="#section5" rel="external nofollow" >Section 5</a></li>
        </ul>
    </div>
    <div class="section" id="section1">
        <h2>Section 1</h2>
        <p>第一块 </p>
        <video
            src="https://img-baofun.zhhainiao.com/pcwallpaper_uGC/preview/2366564fa6b83158208eb3181752a8d6_preview.mp4"
            autoplay muted loop></video>
    </div>
    <div class="section" id="section2">
        <h2>Section 2</h2>
        <p>第二块 </p>
        <video src="Https://img-baofun.zhhainiao.com/market/133/3760b2031ff41ca0bd80bc7a8a13f7bb_preview.mp4" autoplay
            muted loop></video>
    </div>
    <div class="section" id="section3">
        <h2>Section 3</h2>
        <p>第三块 </p>
        <video src="https://img-baofun.zhhainiao.com/market/semvideo/3fc6cdef4427e61be69096c6ebb59a1c_preview.mp4"
            autoplay muted loop></video>
    </div>
    <div class="section" id="section4">
        <h2>Section 4</h2>
        <p>第四块 </p>
        <video src="https://img-baofun.zhhainiao.com/market/semvideo/6ac24b3f50fda0b1a55f7ff25c6b62af_preview.mp4"
            autoplay muted loop></video>
    </div>
    <div class="section" id="section5">
        <h2>Section 5</h2>
        <p>第五块 </p>
        <video src="https://img-baofun.zhhainiao.com/market/133/97ba6b60662ab4f31ef06cdf5a5f8e94_preview.mp4" autoplay
            muted loop></video>
    </div>

.elevator {
    position: fixed; 
    top: 50%; 
    right: 0; 
    transfORM: translateY(-50%); 
}
.elevator ul {
    list-style: none; 
    margin: 0; 
    padding: 0; 
}
.elevator li {
    margin: 10px 0; 
}
.elevator a {
    display: block; 
    padding: 10px; 
    background-color: #ccc; 
    color: #000; 
    text-decoration: none; 
}
.elevator a.active {
    background-color: #000; 
    color: #fff; 
}

.section {
    width: 90vw; 
    height: 110vh; 
}
.section video {
    width: 100%; 
    height: 90%; 
}