Содержание прокрутки должно быть скрыто

Question

Проблема в том, что я хочу обрезать содержимое B, прокручивая содержимое A, и когда оно снова прокручивается, оно должно появиться снова.

Таким образом, это должна быть невидимая область, которая помещается в содержимое A.Я подозреваю, что мне понадобится JavaScript здесь или это синоним только CSS?

body {
  background-image: url('https://placeimg.com/1000/1000/nature/grayscale');
  background-repeat: no-repeat;
  background-attachment: fixed;  
}

div { padding:10px; }

.fixed {
  position: fixed;
  top: 100px;
  left: 50px;
  border: 1px solid red;
  height:100px;
  width:400px;
  z-index: 10;
}

.content {
  background:#fff;
  width:400px;
  height:1200px;
  margin-top: 220px;
  margin-left: 50px;
}

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="fixed">
  Content A
</div>

<div class="content">  
  Content B
</div>

Большое спасибо за помощь!Rufnex