如何实现当前页面导航栏项放大效果？JS方案失效求助

需要实现的效果：当页面滚动到对应区块（比如home区块）时，导航栏中对应的按钮自动放大并高亮（即应用预定义的current类样式）。尝试用JavaScript实现但未成功，现有CSS和HTML代码如下：

现有代码 #

CSS 样式 #

ul{
    list-style: none;
}
a{
    text-decoration: none;
}
#navbar{
    position: absolute;
    width: 50vw;
    left: calc(50vw - 25vw);

}
#navbarlist{
    top: 50px;
    left: 25vw;
    width: 50vw;
    position: fixed;
    display: flex;
    justify-content: space-between;
    z-index: 1;
    padding: 0;
}
.navbaritem{
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
    opacity: 0.5;
    width: 100px;
    height: 100px;
    border-radius: 50%;
}
.navbaritem:hover{
    transform: scale(1.5);
    margin-top: 30px;
}
.current{
    transform: scale(1.5);
    margin-top: 30px;
    color: aqua;
}
.home{
    background-color: rgba(216,157,255,1);
}
.about{
    background-color: rgb(236,136,183);
}
.products{
    background-color:rgba(255,115,115,1);
}
.services{
    background-color:rgba(255,179,111,1);
}
.contactus{
    background-color: rgba(255,253,106,1);
}
#home{
    width: 100vw;
}
#homeheader{
    font-size: 140px;
    position: relative;
    top:75px;
    transform: rotate(-3.4deg);
}
.sections{
    width: 100vw;
}
#aboutheader{
    position: relative;
    font-size: 70px;
    top: 500px;
}
#aboutuspart{
    font-size: 140px;
}

HTML 结构 #

<header>
    <nav id="navbar">
        <ul id="navbarlist">
            <li class="navbaritem home"><a href="#home">home</a></li>
            <li class="navbaritem about"><a href="#about">about</a></li>
            <li class="navbaritem products"><a href="#products">products</a></li>
            <li class="navbaritem services"><a href="#services">services</a></li>
            <li class="navbaritem contactus"><a href="#contactus">contact us</a></li>
        </ul>
    </nav>
</header>

完整解决方案 #

调整后的 CSS（优化体验） #

ul{
    list-style: none;
}
a{
    text-decoration: none;
}
#navbar{
    position: absolute;
    width: 50vw;
    left: calc(50vw - 25vw);

}
#navbarlist{
    top: 50px;
    left: 25vw;
    width: 50vw;
    position: fixed;
    display: flex;
    justify-content: space-between;
    z-index: 1;
    padding: 0;
}
.navbaritem{
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
    opacity: 0.5;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    transition: all 0.3s ease; /* 添加过渡动画，让切换更平滑 */
}
.navbaritem:hover{
    transform: scale(1.5);
    margin-top: 30px;
}
.current{
    transform: scale(1.5);
    margin-top: 30px;
    color: aqua;
    opacity: 1; /* 高亮时完全显示 */
}
.home{
    background-color: rgba(216,157,255,1);
}
.about{
    background-color: rgb(236,136,183);
}
.products{
    background-color:rgba(255,115,115,1);
}
.services{
    background-color:rgba(255,179,111,1);
}
.contactus{
    background-color: rgba(255,253,106,1);
}
/* 给区块设置全屏高度，确保滚动可触发检测 */
.sections{
    width: 100vw;
    height: 100vh;
    padding-top: 150px; /* 避免内容被固定导航遮挡 */
    box-sizing: border-box;
}
#homeheader{
    font-size: 140px;
    transform: rotate(-3.4deg);
}
#aboutheader{
    font-size: 70px;
}
#aboutuspart{
    font-size: 140px;
}

补全后的 HTML（添加完整区块） #

<header>
    <nav id="navbar">
        <ul id="navbarlist">
            <li class="navbaritem home current"><a href="#home">home</a></li>
            <li class="navbaritem about"><a href="#about">about</a></li>
            <li class="navbaritem products"><a href="#products">products</a></li>
            <li class="navbaritem services"><a href="#services">services</a></li>
            <li class="navbaritem contactus"><a href="#contactus">contact us</a></li>
        </ul>
    </nav>
</header>

<main>
    <section id="home" class="sections">
        <h1 id="homeheader">HOME</h1>
    </section>
    <section id="about" class="sections">
        <h2 id="aboutheader">ABOUT</h2>
        <div id="aboutuspart">About Us Content</div>
    </section>
    <section id="products" class="sections">
        <h2>PRODUCTS</h2>
    </section>
    <section id="services" class="sections">
        <h2>SERVICES</h2>
    </section>
    <section id="contactus" class="sections">
        <h2>CONTACT US</h2>
    </section>
</main>

JavaScript 实现逻辑 #

// 获取所有区块和导航项
const sections = document.querySelectorAll('.sections');
const navItems = document.querySelectorAll('.navbaritem');

// 使用IntersectionObserver监听区块可见性（性能优于scroll事件）
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            // 获取当前活跃区块的ID
            const activeId = entry.target.getAttribute('id');
            // 移除所有导航项的current类
            navItems.forEach(item => item.classList.remove('current'));
            // 给对应导航项添加current类
            const activeNav = document.querySelector(`.navbaritem a[href="#${activeId}"]`).parentElement;
            activeNav.classList.add('current');
        }
    });
}, {
    threshold: 0.5 // 当区块50%进入视口时触发切换
});

// 为每个区块添加监听
sections.forEach(section => observer.observe(section));

核心说明 #

1. 给每个区块设置100vh高度，确保滚动时能触发可见性检测，同时添加内边距避免内容被固定导航遮挡
2. 用IntersectionObserver替代传统的scroll事件监听，减少性能消耗，无需频繁计算元素位置
3. 初始化时给home导航项默认添加current类，保证页面加载时的初始状态正确
4. 当区块进入视口的比例达到50%时，自动切换对应导航项的高亮样式

内容的提问来源于stack exchange，提问作者mob x