Javascript 滚动显示图像：保持底部图像固定，直到视差覆盖完成，然后继续页面滚动

英雄形象需要保持固定，直到视差完成，然后页面滚动正常

这就是我希望达到的效果：

正如你所看到的，背景并不完美。

window.addEventListener（'scroll'，函数（e）{
var scrolled=window.pageYOffset；
const background=document.querySelector（'.cover'）；
background.style.top=-（滚动*10）+“px”；
});
正文{
高度：1200px；
保证金：0；
}
.集装箱{
高度：100vh；
溢出：隐藏；
}
div{
位置：相对位置；
}
.掩护{
z指数：1；
位置：绝对位置；
背景：#fff；
不透明度：.75；
身高：100%；
宽度：100%；
}
.下面{
z指数：0；
宽度：100%；
}
.击倒{
背景：url(https://placekitten.com/1200);
背景尺寸：封面；
背景重复；无重复；
背景位置：顶部；
背景附件：固定；
颜色：红色；
-webkit文本填充颜色：透明；
-webkit背景剪辑：文本；
字体大小：粗体；
字体大小：300px；
字体系列：arial，helvetica；
利润率：200px自动；
文本对齐：居中；
}

喵。