javascript - 如何隐藏透明 div 下滚动的内容？

Question

你有两个 div，一个在另一个上面，上面的那个是透明的。但是，当您滚动时，您希望底部的 div 隐藏，因为它位于第一个透明 div 下方。

您不希望第二个 div 的 display: 在进入第一个 div 下后立即更改为 none;。您只想隐藏下面的部分。

我在谷歌上广泛搜索了答案:

1) Hide Scrolling Content Under Transparent Header

2) Scrollable Content Behind Transparent Fixed Position Divs When Scrolling The Page

3) Scrolling Body Underneath a Transparent Header Div

4) Transparent Static Header Would Like to Not End Up With Text Showing Under The Header When Scrolling

5) Hide Scrolling Content Under Fixed Transparent Header Scroll Background

#1-4答案使div位于顶部background:继承或background-image: url('background_image.jpg)'。对我来说，这个问题是我的背景是一张照片，也就是说，当你向下滚动时，你看到的东西是不同的，而不是颜色或图案。透明div的“背景”需要随着真实背景的变化而变化。

#5 使用 JQuery 提供了一个解决方案，但是在浏览器(而不是 Firefox)中存在可怕的滚动延迟问题。

各位，我该怎么做？

Answer 1

如果没有 JavaScript，这是无法完成的。为了使内容不通过透明层显示，它根本不能被渲染 - 您需要使用 overflow:hidden。问题是，如果内容随着页面滚动，内容的边缘无法固定。元素可以相对于视口(viewport)或相对于页面定位，但不能同时定位。