Javascript 向上滚动时如何将一个div隐藏在另一个半透明div后面

当用户向上滚动时，我希望半透明div在第二个半透明div后面“消失”。我试图避免任何重叠的不透明度。两个div共享相同的背景图像，我也希望与页面一起滚动

编辑：

这很有效。为了解决重叠的不透明度问题，我复制了顶部div上的主体背景，并给它一个更高的z索引。当用户向上滚动时，该层后面的内容消失

为了解决背景不滚动的问题，我基于此解决方案滚动背景图像>

我更改了这些值，使顶部div和主体背景同时移动，使单个背景图像看起来正在移动

JSFIDLE>>>

$（'document'）.ready（函数（）{
$（'#底部'）。滚动（函数（）{
var x=$（this.scrollTop（）；
$（'#top'）.css（'background-position'，'0%'+parseInt（-x）+'px'）；
$（'body'）.css（'background-position'，'0%'+parseInt（-x）+'px'）；
});
}); 
正文{
保证金：0；
背景图像：url（“https://i.ibb.co/PDrJKf7/chrissa-giannakoudi-0-QRZk-Whfc-A4-unsplash.jpg");
背景尺寸：100%自动；
背景位置：0%0；
}
#顶{
排名：0；
位置：固定；
高度：100px；
宽度：100%；
背景图像：线性渐变（rgba（153，50，204，0.7），rgba（153，50，204，0.75）），url（“https://i.ibb.co/PDrJKf7/chrissa-giannakoudi-0-QRZk-Whfc-A4-unsplash.jpg");
背景尺寸：100%自动；
背景位置：0%0；
z指数：1；
}
#底部{
位置：相对位置；
顶部：100px；
高度：300px；
宽度：100%；
背景色：rgba（176224230,0.7）；
溢出：自动；
溢出x：隐藏；
溢出y：自动；
}

导航
内容

内容

内容

内容

内容5

内容

内容

内容

内容

内容10

内容

内容

内容

您可以使用JS实现您的目标，方法是将事件设置为在scroll上启动

使用这个JS脚本到你的小提琴，并尝试

var nav = document.querySelector('#nav');

window.onscroll = function() {
if (document.documentElement.scrollTop > 20) {
nav.style.opacity = "0.1";
} else {
nav.style.opacity = "1";
}
}

如果我理解正确，那么你可以使用JS绑定一个滚动事件，在滚动时将nav的不透明度设置为0.1。我用JS编辑了你的小提琴，现在就试试=），请编辑你的帖子，并将你的代码作为一个片段添加到这里，以获得更好的体验，并随时从你的问题中获得最佳效果，因为链接可能会在以后中断，用户以后也找不到代码谢谢你的回答：）这不是我想要的，我希望div向上滑动并“在”顶部div的后面。我在描述问题时遇到了困难，我现在对它进行了编辑，希望它更有意义。我不再使用JS来更改不透明度，因为它一次影响了整个div，我不知道如何获得“滑出视图”的效果。相反，我只是使用jquery设置背景图像的运动，其余部分则依赖于图层。