如果在透明下隐藏内容 header

Question

我有一个透明的 header 不能是图像或颜色，它需要是透明的。 每当一些 div 在我的 header 下滑动时，我只想隐藏它下面的部分。

问题

 body { margin: 0; width: 100%; background-color: yellow; height: 100vh; }.header { height: 5rem; top: 0; position: fixed; width: 100%; background-color: rgba(0, 0, 0, 0.5); }.content { margin-top: 25rem; height: 200px; background-color: blue; color: white; }.footer { margin-top: 30rem; height: 5rem; bottom: 0; width: 100%; background-color: rgba(0, 0, 0, 0.5); }

 <div class="header"> Header</div> <div class="content"> DONT SHOW THIS DIV UNDER HEADER</div> <div class="footer">footer</div>

Answer 1

实际上，您完全可以在没有 javascript 的情况下实现这一目标。 您可以将元素“置于”带有主体background的.header ，并设置适当的z-index以使其保持在下方。

像这样的东西：

 body { margin: 0; width: 100%; background-color: yellow; height: 100vh; }.header { height: 5rem; top: 0; position: fixed; width: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 3; }.content { margin-top: 25rem; height: 200px; background-color: blue; color: white; z-index: 1; }.footer { margin-top: 30rem; height: 5rem; bottom: 0; width: 100%; background-color: rgba(0, 0, 0, 0.5); } /* this will act as a mask to hide the content when it get "under" the header: */ #contentMask {background: inherit; z-index: 2; position: fixed; top: 0; left: 0; height: 5em; width: 100%;}

 <div class="header"> Header</div> <div class="content"> DONT SHOW THIS DIV UNDER HEADER</div> <div id="contentMask"></div> <div class="footer">footer</div>

编辑（至于评论）：

您可以使用 z-index 属性来实现它。 这是一个普遍的例子：

 body { margin: 0; width: 100%; background-color: yellow; height: 100vh; }.header { height: 5rem; top: 0; position: fixed; width: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 4; } #contentMask { background: inherit; position: fixed; top: 0; left: 0; height: 5em; width: 100%; z-index: 2; }.content { position: relative; margin-top: 25rem; height: 200px; background-color: blue; color: white; z-index: 1; }.under { z-index: 3; }.above { z-index: 5; }.footer { margin-top: 30rem; height: 5rem; bottom: 0; width: 100%; background-color: rgba(0, 0, 0, 0.5); }

 <div class="header"> Header</div> <div id="contentMask"></div> <div class="content"> DONT SHOW THIS DIV UNDER HEADER</div> <div class="content under"> SHOW THIS DIV UNDER HEADER</div> <div class="content above"> SHOW THIS DIV ABOVE HEADER</div> <div class="footer">footer</div>