Javascript scrollSpy与vanilla js，代码不'；行不通

我试图用vanilla js滚动spy，但代码不起作用，我不明白为什么。我需要使用IntersectionObserver API更改nav的样式。 我已经检查了代码，找不到有什么问题

---

我注意到了几个错误/打字错误

您从不调用

scrollSpy（）

就在

if（'IntersectionObserver'在窗口中）{

之后，您创建了一个从未调用过的函数。我已经删除了它

currentNav

选择器应该是

.panel.menu.menu项[href='.${elem.id}]

在

之间没有空格。菜单项

和

[href='.${elem.id}]

不需要

a

。请注意，它可能只适用于

[href='.${elem.id}]

我简化了

借

我已经更改了CSS以使代码段工作，但这不是答案的一部分

document.addEventListener（'DOMContentLoaded'，（）=>{
常量scrollSpy=（）=>{
const targets=document.querySelectorAll（'.section'）；
常量选项={
阈值：0.5，
};
如果（'IntersectionObserver'在窗口中）{
/* 2 */ // () => {…
const inView=目标=>{
const intersectionobs=新的IntersectionObserver（条目=>{
entries.forEach（entry=>{
常量元素=entry.target；
/*3*/const currentNav=document.querySelector（`[href='.${elem.id}']`）；
/*4*/currentNav？.classList.toggle（'active'，entry.isIntersecting）；
})
}，选项）；
观察（目标）
};
目标。forEach（inView）；
}
};
/*1*/scrollSpy（）；
})

正文{
保证金：0；
填充：20px；
框大小：边框框；
显示：网格；
网格模板柱：150px 1fr；
高度：100vh；
}
.菜单项{
显示：块；
}
主要{
溢出：自动；
}
.科{
高度：100vh；
边框：2倍实心；
}
.主动{
背景：蓝色；
颜色：白色；
}

---

感谢您的帮助，我将尝试用您的建议修复代码。

<aside class="panel">
    <nav class="menu">
        <a class="menu-item" href="#seccion1">Reloj Digital y Alarma sonora</a>
        <a class="menu-item" href="#seccion2">Eventos de Teclado</a>
        <a class="menu-item" href="#seccion3">Countdown</a>
        <a class="menu-item" href="#seccion4">Responsive con Js</a>
        <a class="menu-item" href="#seccion5">Responsive Tester</a>
        <a class="menu-item" href="#seccion6">Deteccion de Dispositivos(user agent)</a>
        <a class="menu-item" href="#seccion7">Deteccion del estado  de la red</a>
        <a class="menu-item" href="#seccion8">Deteccion de dispositivos de entrada</a>
        <a class="menu-item" href="#seccion9">Geolocalizacion</a>
        <a class="menu-item" href="#seccion10">Filtro de busqueda</a>
        <a class="menu-item" href="#seccion11">Sorteo Digital</a>
        <a class="menu-item" href="#seccion12">Responsive Slider</a>
        <a class="menu-item" href="#seccion13">ScrollSpy</a>
    </nav>
</aside>  
<main>
    <section id="seccion1" class="section">
    <section id="seccion2" class="section"> 
    <section id="seccion3" class="section">
    <section id="seccion4" class="section">
</main> 

.active{
    text-decoration: underline;
    text-decoration-color: var(--main-color);
    color: var(--second-color);
}

document.addEventListener('DOMContentLoaded', () => {
    const scrollSpy = () => {
        const targets= document.querySelectorAll('.section');
        const options = {
            threshold: 0.5,
        };
    
        if('IntersectionObserver' in window){
         ()=> {
            const inView = target => {
                const interSecObs = new IntersectionObserver(entries => {
                    entries.forEach(entry => {
                        const elem = entry.target;
                        let currentNav = document.querySelector(`.panel .menu .menu-item a[href='#${elem.id}']`);
                        (entry.isIntersecting) ? currentNav.classList.add('active') : currentNav.classList.remove('active')
                    })
                }, options);
                interSecObs.observe(target)
            };
            targets.forEach(inView);
         }   
        }
    }
    
})

(entry.isIntersecting) ? currentNav.classList.add('active') : currentNav.classList.remove('active')

currentNav?.classList.toggle('active', entry.isIntersecting);