Javascript 如何在滚动到fadeIn元素时使用它？

我有以下几点：

<div class="item">First Item</div>
<div class="item">Second Item</div>
<div class="item">Third Item</div>
<div class="item">Fourth Item</div>

然后当我滚动到下一个元素时，我滚动到的元素应该

fadeIn（）

如何实现这一点？
如果您知道可以使用的元素的位置：
$（窗口）。scrollTop（）

这将为您提供当前的“滚动量”。如果添加的值大于窗口的高度，则将从窗口的底部边框获取位置

您可以将其与元素
$（item）.offset（）的位置进行比较，
因此，如果窗口的底部边框大于元素的位置（元素在屏幕上可见），则必须制作动画

动画是用css完成的。因此，您只需添加/删除一个类即可为元素设置动画。您可以使用例如
m[1].classList.remove（“淡入淡出”）

请参见下面的示例。你可以根据需要修改它，我希望你能理解


函数fadeIn（）{
var m=document.getElementsByClassName（'item1'）；
var windowBot=getCurrentScroll（）；
$（m）.每个（函数（）{
如果（windowBot>=getItemScroll（此））{
如果（！this.classList.contains（'fade'））{
this.className+=“淡入淡出”；
}
} 
});
}
//返回窗口底部边框的当前位置
//70是到底部窗口边框的距离，元素在显示之前必须具有该距离
函数getCurrentScroll（）{
返回$（窗口）.scrollTop（）+$（窗口）.height（）-70；
}
//返回项目的当前位置
函数getItemScroll（项目）{
返回$（项目）.offset（）.top；
}
.item、.item1{
位置：相对位置；
高度：50px；
宽度：50px；
背景：红色；
边缘底部：100vh；
}
.项目1{
不透明度：0；
}
.褪色{
不透明度：1；
过渡：所有2；
}

第一项
第二项
第三项
第四项
你是说像这样吗@如果有任何答案解决了你的问题，请考虑点击复选标记。这向更广泛的社区表明，你已经找到了一个解决方案，并给回答者和你自己带来了一些声誉。没有义务这样做。如果没有，请在评论中写下原因或编辑您的问题，使您的问题更清楚。
    $(".item:not(:eq(0))").fadeOut();