Javascript 同步导航栏和节以显示活动类，同时用户使用节向下滚动页面

我添加了一个for each循环，当你向下滚动作为活动部分时，它会将颜色应用于所有部分，而不是活动部分

我需要有关for each循环本身的帮助，以停止颜色仅位于活动类，并将其与导航栏菜单同步，以显示活动类

下面是附加的代码片段

这是一个现实生活中的例子，但是我需要我的，用于部分而不是列表项

任何帮助都将受到感谢，并提前向所有人表示感谢

/**
* 
*操纵DOM练习。
*练习以编程方式构建导航，
*从导航滚动到锚点，
*并在滚动时高亮显示视口中的部分。
* 
*依赖项：无
* 
*JS版本：ES2015/ES6
* 
*JS标准：ESlint
* 
*/
/*注
请删除以“Future reference”开头的注释，其添加仅供将来参考和阅读
/*
/**
*定义全局变量
* 
*/
/*滚动部分变量*/
const pagesections=document.queryselectoral（'section'）；
const navigationbar=document.getElementById（“导航栏列表”）；
const fragment=document.createDocumentFragment（）；
/**
*结束全局变量
*启动辅助函数
*
*/
/**
*端点辅助函数
*开始主要功能
*
*/
//参考项目的WebDevelopment Udacity缩放会议
pagesections.forEach（（elm，索引）=>{
/*链接文本*/
让pagelinktext=elm.getAttribute（“数据导航”）；
让pagenewlink=document.createElement（“a”）；
让pagetextnode=document.createTextNode（pagelinktext）；
让pagenewlistitem=document.createElement（“li”）；
//回流分区
pagenewlink.appendChild（pagetextnode）；
pagenewlistitem.appendChild（pagenewlink）；
//滚动到第节
//调用pagenewlink并使用单击箭头功能添加事件侦听器
pagenewlink.addEventListener（“单击”，“事件）=>{
//滚动到视图滚动到elm对于elm滚动到的案例
scrollIntoView（{behavior:“smooth”}）；
})
fragment.appendChild（pagenewlink）；
/*
将此片段添加到页面中的现有元素（即导航栏）
作为一个虚构的元素
*/
})
navigationbar.appendChild（片段）；
//将节设置为活动
/*
添加带有函数的事件侦听器意味着
当用户滚动时，请执行此功能
*/
window.addEventListener（“滚动”，（）=>{
/*对于添加的每个循环，通过所有部分进行循环*/
/*foreachloop函数执行getBoundingClientRect以在节中滚动*/
pagesection.forEach（（pagesection，索引）=>{
const pagereact=pagesection.getBoundingClientRect（）；
/*
.getBoundingClientRect（）；接受左上右下的高度和宽度
*/
//添加警报以查找X&Y偏移的截面位置。
//警报（pagesection.getAttribute（“数据导航”）+pagereact.top）；
/*按数据导航属性检索*/
const navigationsection=pagesection.getAttribute（“数据导航”）；
如果（pagereact.top>0&&pagereact.top<400）；
/*另一个警报，以确保节正确放置
警报（导航部分）；
*/
//删除部分
pagesections.forEach（（activepagesection）=>{
if（activepagesection.classList.contains（“active”））
activepagesection.style.background=“线性渐变（到右下角，#304352，#d7d2c）”；
})
pagesection.style.background=“线性渐变（到底部，#c31432，#240b36”；
const pagelinks=document.queryselectoral（“a”）；
pagelinks.forEach（（pagelinks）=>{
如果（pagelinks.innerText==navigationsection）{
pagelinks.background=“白色”；
}
})
});
})
//删除活动类
//当相应部分处于活动状态时，将菜单项设置为活动。
/*参考文献
https://www.w3schools.com/howto/howto_js_active_element.asp
*/
//返回顶部按钮
函数scrollTopfunction（）{
如果（document.body.scrollTop>50||
document.documentElement.scrollTop>100）{
TopButton.style.display=“block”；
}否则{
TopButton.style.display=“无”；
}
}
//对于chrome、safari、firefox和大多数现代浏览器，用户点击返回页面顶部
函数pushtopfunction（）{
document.documentElement.scrollTop=0；
document.body.scrollTop=0；
}
/*空闲时间为500秒时的用户超时功能*/
setTimeout（函数（）{alert（“用户超时消息：5分钟”）；}，500000）；
/*
未来参考
确保为将来的高级代码命名不同的变量
*/

操纵DOM

登录页
第一节
我的同僚们都是精英。
我的名字是“我的名字”和“我的名字”是“我的名字”和“我的名字”，
维塔·维利特·卡姆克（vitae velit cumque）实习，最低连续性。

第二节
我的同僚们都是精英。
我的名字是“我的名字”和“我的名字”是“我的名字”和“我的名字”，
维塔·维利特·卡姆克（vitae velit cumque）实习，最低连续性。

第三节
我的同僚们都是精英。
我的名字是“我的名字”和“我的名字”是“我的名字”和“我的名字”，
维塔·维利特·卡姆克（vitae velit cumque）实习，最低连续性。

第四节
第五节
我的同僚们都是精英。