如果在透明标题下，则隐藏内容

Question

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

问题

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>