Javascript 如果滚动到某个位置，如何淡入元素

在我的示例中，如果我的窗口顶部位置距离底部约为100px，我将尝试淡入/淡出元素

覆盖


这怎么可能呢


。分区卡{
位置：相对位置；
高度：500px；
线高：500px；
文本对齐：居中；
字体大小：46px；
颜色：#fff；
背景：#777；
}
.分区卡：第n个孩子（2）{
背景:#666；
}
.分区卡：第n个孩子（3）{
背景:#555；
}
.分区卡：第n个孩子（4）{
背景：#444；
}
.分区卡：第n个孩子（5）{
背景：#333；
}
.覆盖{
指针事件：无；
显示：块；
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
可见性：隐藏；
背景色：#000；
不透明度：0；
}

1.
2.
3.
4.
5.
您想要实现的目标可以这样做


var overlays=document.querySelectorAll（'.overlays'）；
var totalOverlays=overlays.length；
var overlayToChange=覆盖[totalOverlays-1]；
document.addEventListener（'scroll'，function（）{
var fromBottom=document.body.offsetHeight-（window.innerHeight+window.scrollY）；
如果（从最底层）您是否尝试过实现任何JS？