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

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

亲们，我该怎么做呢？

Answer 1

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