JavaScript 实现滚动内容自动切换 Tab

需求背景

在长页面中，通过滚动位置自动切换顶部导航栏的激活状态，提升用户体验。

实现思路

监听窗口的滚动事件，计算当前滚动距离与各个区块的位置关系，动态更新导航项的激活状态。

代码实现

HTML 结构

<header></header>
<ul class="nav">
    <li class="item active">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
</ul>
<div class="container">
    <section>1</section>
    <section>2</section>
    <section>3</section>
</div>

JavaScript 逻辑

const navItems = document.querySelectorAll('.nav .item');
const sections = .();

.(,  {
     currentIndex = -;
    sections.( {
         top = section.;
         (. >= top - ) {
            currentIndex = index;
        }
    });
    
    navItems.( item..());
     (currentIndex !== - && navItems[currentIndex]) {
        navItems[currentIndex]..();
    }
});