如何用CSS隐藏div的上半部分

Question

我需要创建一种幻觉，即在滚动页面时文章的内容会在其下方滑动。 HTML看起来像这样：

<div class="wrapper">
    <div class="header">
        <h1>Title</h1>
    </div>
    <div class="body">
        <p>a lot of content</p>
    </div>
</div>

此时CSS看起来像这样：

.wrapper{
  height: 100vh;
  width: 50%;
  margin-left: 25%;
  margin-top: 100px;
  position: relative;
}
.header{
  padding: 20px;
  background-color: #fff;
  position: fixed;
  display: block;
  box-sizing: border-box;
  width: calc(50% - 8px);
  z-index: 2;
}
.body{
  z-index: 1;
  top: 120px;
  position: absolute;
  padding: 20px;
  background-color: #fff;
}

https://jsfiddle.net/joris508/frad472j/

因为在真实网站的背景中有一个图像，我不能只将顶部有较高z-index的元素隐藏到顶部以隐藏该部分。

我还试图让内容部分（.body）自行滚动。这在视觉上创造了正确的效果，但由于页面上的背景图像具有视差滚动效果，因此滚动div本身会导致问题。

这个问题有解决办法吗？