Скрыть содержимое, если под прозрачным заголовком

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 вообще. Вы можете поместить элемент «под» .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>