有人能用一种简单易懂的方式翻译这个JavaScript函数吗？

上面的codepen链接包含一个滚动动画示例，该示例在向下滚动时更改导航的行为和外观，这是使用纯香草JavaScript完成的。问题是我不明白这个脚本是如何工作的。我有JavaScript的基本知识，到目前为止我知道

函数中有3个变量——section（选择“section”类）、空对象{}和值为0的i

经过研究，我发现Array.prototype.forEach.call与[].forEach（function（））相同。根据我的理解，e是一个参数。从这里开始，我迷路了，因为我不知道 段[e.id]=e.offsetTop

好的，我理解window.onscroll=function（）{}，但不是100%确定为什么需要为scrollPosition创建一个等于scrollTop或body.scrollTop的变量

剩下的代码我都迷路了。。。我喜欢逐行解释。多谢各位

（函数（）{
"严格使用",；
var section=document.queryselectoral（“.section”）；
var节={}；
var i=0；
Array.prototype.forEach.call（节，函数（e）{
截面[e.id]=e.offsetTop；
});
window.onscroll=函数（）{
var scrollPosition=document.documentElement.scrollTop | | document.body.scrollTop；
第（i）节{
如果（第[i]节），那么如果您查看该函数，您可以看到它是一个函数，这意味着它是一个在遇到它时立即执行的函数。当函数运行时，它会执行以下操作：

var section = document.querySelectorAll(".section");

这将查找具有
节
类的所有节点。这将返回一个
节点列表
。这将表示
等

Array.prototype.forEach.call(section, function(e) {
sections[e.id] = e.offsetTop;
});

这是一种迭代具有类似数组属性的列表的方法。如果它是数组，则会直接对其调用forEach（如下面的@RobG所示）。这将把每个
节的
id
属性存储到
节
对象中，该对象用作偏移顶部值的查找，即渲染时每个节离顶部有多远

window.onscroll = function() {}

每次滚动时都将触发的事件处理程序

var scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;

到目前为止，您的滚动距离顶部有多远

if (sections[i] <= scrollPosition) {
    document.querySelector('.active').setAttribute('class', ' ');
    document.querySelector('a[href*=' + i + ']').setAttribute('class', 'active');
  }

if（sections[i]既然其他人已经给了你解释，我就试着重写一下，让它更具可读性


{
让sectionNodes=document.getElementsByCassName（“section”），
sectionTopPositions={}
for（让节节点中的节点）{
sectionTopPositions[node.id]=node.offsetTop
}
函数onWindowScroll（）{
让scrollPosition=document.documentElement.scrollTop
||document.body.scrollTop
用于（让[nid，topPos]部分位于顶部位置）{
if（topPos）创建
scrollPosition
变量是不必要的，但它允许稍后在一个简短的
if
语句中使用它（如果是
if（第[i]节），情况会更糟非常感谢！现在我对它有了更好的理解。我将逐步接受您的解释，并使用类似的方法自己进行更多的练习。“查找当前活动部分”实际上是“使用
活动的
类查找第一个元素”，这是代码中的一个实际流，找到当前活动的部分确实会更好，就像代码没有检查是否实际有
id
，是否真的应该映射到其锚点，也没有对锚点使用严格的属性检查，因此如果它们有节
domain
，
maint附件
，
主
，它将断开。