Javascript 如果指定的媒体位于视口中，如何将类添加到链接？

我把这个编码了：

//单击函数
$（'body'）。在（'click'，'a'，function（）上{
$（'a.active'）.removeClass（'active'）；
$（this.addClass（'active'）；
});
//滚动功能
const sectionIsInViewport=document.querySelector（'section'）；
observer=新的IntersectionObserver（（回调）=>{
log（'此部分现在在视口中'）；
});
观察者。观察（第I节观察端口）
*{
保证金：0；
填充：0；
字体系列：无衬线；
字体大小：30px；
文字装饰：无；
颜色：继承；
}
身体{
显示器：flex；
游标：默认值；
}
#左,，
#对{
宽度：50%；
高度：100vh；
溢出y：滚动；
滚动行为：平滑；
}
#左{
背景色：rgb（220、220、220）；
}
#对{
背景色：rgb（200200200）；
}
.媒体{
填充：10px；
填充底部：0；
}
.媒体：第n个最后一个孩子（1）{
边缘底部：10px；
}
img{
显示：块；
宽度：100%；
}
.链接{
光标：指针；
}
.主动{
背景色：黑色；
颜色：白色；
}
我认为IntersectionObserver非常适合您的需要。
这个如何满足你的需要


//单击函数
$（'body'）。在（'click'，'a'，function（）上{
$（'a.active'）.removeClass（'active'）；
$（this.addClass（'active'）；
});
//滚动功能
const mediaInViewport=document.queryselectoral（'.media'）；
观察者=新的相交观察者（（条目，观察者）=>{
log（“视口中的下一个媒体”）；
条目。forEach（（条目）=>{
if（entry.target&&entry.isIntersecting）{
entry.target.classList.add（'active'）；
const closestParent=entry.target.closest（'section'）；
如果（亲密父母）{
常量选择器=closestParent.id；
const links=document.querySelectorAll（'.link'）；
for（链接的常量链接）{
const split=link.href.split（“#”）；
如果（拆分长度>=2）{
const local=split[1]；
如果（本地===选择器）{
link.classList.add（'active'）；
}
}
}
}
} 
});
}，{阈值：0.7}）；
window.addEventListener（'DOMContentLoaded'，（）=>{
setTimeout（//等待图像完全加载
() => {
mediaInViewport.forEach（（项目）=>{
观察员.观察（项目1）；
});
}
, 1000);
});
*{
保证金：0；
填充：0；
字体系列：无衬线；
字体大小：30px；
文字装饰：无；
颜色：继承；
}
身体{
显示器：flex；
游标：默认值；
}
#左,，
#对{
宽度：50%；
高度：100vh；
溢出y：滚动；
滚动行为：平滑；
}
#左{
背景色：rgb（220、220、220）；
}
#对{
背景色：rgb（200200200）；
}
.媒体{
填充：10px；
填充底部：0；
}
.媒体：第n个最后一个孩子（1）{
边缘底部：10px；
}
img{
显示：块；
宽度：100%；
}
.链接{
光标：指针；
}
.主动{
背景色：黑色；
颜色：白色；
}

您好，谢谢您的回答！不幸的是，左侧的链接没有更新。如果相应区域位于viewport.Hi中，则它们应获得“.active”类。我现在应该加上这个。但是，应该注意的是，这可能会扩展本机Javascript的限制。像React或svelte这样的框架可以更好地处理这样的动态行为。感谢您的更新！也许还不清楚：总是只有一个链接应该有类“.active”。这容易吗？我能做到。也许还不清楚：这段代码只是一个如何做到这一点的示例，而不是一个实现您特定需求的完整程序。我希望你能自己修改这个，而不是希望我为你做。