在创建视差滚动效果时将文本固定为图像

Question

我正在尝试创建视差滚动效果，图像效果很好，但是图像上有一些文本，我希望将文本“固定”在图像上，然后使网站的其余部分重叠。滚动时，文本应位于同一位置，直到滚动出图像为止。如果我使用position：fixed，它会一直保存在整个网站上。

Uncaught exception reported

p {
  font-size: 50px;
}

header {
  background-image: url("https://wallpapercave.com/wp/DtslnrT.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  font-weight: bold;
  text-align: center;
  color: #fff;
  font-size:55px;
  height: 100vh;
  width: 100%;
}

.text{
  position: relative;
  width: 100%;
  top: 30%;
}

<header>
  <div class="text">
  Sample text
  </div>
</header>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

p {
  font-size: 50px;
}

header {
  background-image: url("https://i.imgur.com/BVyNv0o.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  font-weight: bold;
  text-align: center;
  color: #fff;
  font-size:55px;
  height: 100vh;
  width: 100%;
}

.text{
  position: relative;
  width: 100%;
  top: 30%;
}