修复了容器div中的文本滚动

Question

我正在开发一个html和css页面，当我滚动页面时，我无法修复文本。

我有3个div，每个都有h1标题。

是否可以滚动页面，在div移动时将标题保留在固定位置？

.corpo{
  width:80%px;
  height:1200px;
  border: 1px solid black;
  margin:20px;
  margin-bottom:50px;  
}

<div class="corpo">
  <h1> Title 1</h1>
</div>

<div class="corpo">
  <h1> Title 2</h1>
</div>

<div class="corpo">
  <h1> Title 3</h1>
</div>

Answer 1

最简单的方法来实现你正在寻找的是使用position: sticky并指定top取决于你想要h1相对于容器div坚持。请参阅下面的代码段以获取示例：

.corpo {
  width:80%px;
  height:1200px;
  border: 1px solid black;
  margin:20px;
  margin-bottom:50px;  
}

.corpo h1 {
  position: sticky;
  top: 20px;
}

<div class="corpo">
  <h1> Title 1</h1>
</div>

<div class="corpo">
  <h1> Title 2</h1>
</div>

<div class="corpo">
  <h1> Title 3</h1>
</div>