Question

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

View

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);
 }

Answer 1

实际上，您完全不需要JavaScript就可以实现这一目标。您可以将元素.header放在正文的background下，并设置适当的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>

在透明标题下隐藏内容

1 个答案: