如何隐藏在透明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 answer使div位于最高background: inherit或background-image: url('background_image.jpg)'。对我来说这个问题是我的背景是一张照片，即向下滚动你看到的不同，而不是颜色或图案。透明div的“背景”需要随着真实背景的变化而变化。

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

伙计们，我该怎么做？

Answer 1

如果没有JavaScript，这是不可能的。对于不通过透明层显示的内容，根本不能呈现它 - 您需要使用overflow:hidden。问题是如果内容随页面滚动，则无法修复内容的边缘。元素可以相对于视口或相对于页面定位，但不能同时定位。