如何隱藏在透明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回答使頂部background: inherit或background-image: url('background_image.jpg)'。對我來說這個問題是我的背景是一張照片，即當你向下滾動你看到的是不同的，而不是顏色或圖案。透明div的「背景」需要隨着真實背景的變化而改變。

＃5提供了一個使用JQuery的解決方案，但是在瀏覽器中沒有Firefox的滾動滯後存在可怕的，可怕的問題。

夥計們，我該怎麼做？

Answer 1

這不能沒有JavaScript。對於不透過透明圖層顯示的內容，它一定不能渲染 - 您需要使用overflow:hidden。問題在於，如果內容隨頁面一起滾動，則內容邊緣無法修復。元素可以相對於視口或相對於頁面定位，但不能同時定位。