Javascript 有没有办法用绝对元素屏蔽粘性元素？

我一直在尝试创建一个粘性位置图像，当它在我的页面的两个部分之间滚动时会发生变化。所以基本上，应该有两个粘性位置图像，顶部被底部遮住，底部被顶部遮住。我很难找到同时屏蔽两个图像的方法（可以使用底部部分

div

隐藏顶部图像，反之亦然，但不能同时屏蔽两个图像）

以下是我使用的代码：

.lblue{
高度：40vh；
宽度：10vw；
职位：-网络工具包粘性；
位置：粘性；
顶部：30vh；
左：45vw；
背景：浅蓝色；
}
劳埃德先生{
高度：40vh；
宽度：10vw；
职位：-网络工具包粘性；
位置：粘性；
顶部：30vh；
左：45vw；
背景：轻珊瑚；
}
蓝先生{
位置：绝对位置；
排名：0；
高度：150vh；
宽度：100vw；
背景：蓝色；
}
瑞德先生{
位置：绝对位置；
顶部：100vh；
高度：100vh；
宽度：100vw；
背景：红色；
}

---

这里有一个解决方案。诀窍是将图像用作CSS背景，因为CSS背景可以很容易地在其父对象的视口中固定

.blue{
位置：绝对位置；
排名：0；
高度：150vh；
宽度：100vw；
背景：蓝色固定线性梯度（浅蓝色，浅蓝色）45vw 30vh/10vw 40vh无重复；
}
瑞德先生{
位置：绝对位置；
顶部：100vh；
高度：100vh；
宽度：100vw；
背景：红色固定线性梯度（lightcoral，lightcoral）45vw 30vh/10vw 40vh无重复；
}

---

位置：如果您考虑使用
剪辑路径
技巧隐藏溢出，使每个元素仅显示在其部分内，则修复了此问题


.lblue，
劳埃德先生{
高度：40vh；
宽度：10vw；
位置：固定；
顶部：30vh；
左：45vw；
背景：浅蓝色；
}
劳埃德先生{
背景：轻珊瑚；
}
蓝色
瑞德先生{
高度：100vh；
背景：蓝色；
剪辑路径：插入（0）；/*这很重要*/
}
瑞德先生{
背景：红色；
}
身体{
保证金：0
}