Исправлена ​​прокрутка текста внутри контейнера

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>