Javascript 滚动时如何将新图像覆盖到固定容器上？

我正试图从这个网站复制这种叠加手机效果：

基本上，当您向下滚动时，fixed div（手机）中的内容也会发生变化

---

我无法理解你向下滚动时产生的显示效果。我只创建了固定的div和网页上的各个部分。

这里是一个简单的滚动覆盖版本

共有3个元素，第一个图像要显示在“手机”中，第二个图像逐渐显示，以及页脚元素。它们有不同的z索引，所以页脚在第一个和第二个后面，第二个在第一个后面

手机有固定的位置，所以滚动时不会移动。页脚相对于主体（或您拥有的任何容器）以100%的比例放置在视野之外

我们介绍了一个简单的滚动事件监听器，用于测试页脚和手机之间是否存在重叠。如果有，那么我们将第一个图像元素的高度设置为其原始高度减去重叠。这将显示第二个元素的底部

没有看到你的代码，我无法判断你是否需要更复杂的东西（例如，如果你的手机和页脚不在同一个位置，你必须知道堆叠上下文）

const footer=document.querySelector（'.footer'）；
const first=document.querySelector（'.first'）；
const firstBottom=first.getBoundingClientRect（）.bottom；
const firstHeight=firstBottom-first.getBoundingClientRect（）.top；
函数checkOverlay（）{
const top=footer.getBoundingClientRect（）.top；
如果（顶部<第一底部）{
first.style.height=firstHeight-firstBottom+top+'px'；
}
}

正文{
宽度：100vw；
高度：100vh；
溢出y：滚动；
溢出x：隐藏；
}
.第一，.第二{
位置：固定；
最高：50%；
左：50%；
边框：1px纯黑；
宽度：20vmin；
高度：30分钟；
溢出：隐藏；
}
.首先{
背景图像：线性渐变（洋红色、粉红色）；
z指数：0；
}
.第二{
背景图像：线性梯度（青色、石灰）；
z指数：-1；
}
.页脚{
宽度：100%；
身高：50%；
背景图像：线性渐变（红色、蓝色）；
位置：相对位置；
最高：100%；
z指数：-2；
}

---

请您向我们展示您目前掌握的代码，最好是StackOverflow代码段。这使帮助更容易。