滚动内容应隐藏

Question

问题是我要修剪在内容A中滚动的内容B，当它再次向下滚动时，它应该重新出现。

因此它应该是不可见的区域，该区域被压入内容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