需求背景
在长页面中,通过滚动位置自动切换顶部导航栏的激活状态,提升用户体验。
实现思路
监听窗口的滚动事件,计算当前滚动距离与各个区块的位置关系,动态更新导航项的激活状态。
代码实现
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]..();
}
});


