<h1>position: sticky</h1>
<div class="contents">
  <p>オレンジで囲まれた要素がstickyが指定された部分です。</p>
  <div class="boxes">
    <div class="box"></div>
    <div class="box sticky"></div>
  </div>
  <p>ボックスの外には出ていきません。</p>
  <p>これはサンプルです。</p>
  <p>これはサンプルです。</p>
  <p>これはサンプルです。</p>
  <p>これはサンプルです。</p>
  <p>これはサンプルです。</p>
  <p>これはサンプルです。</p>
</div>

.boxes {
  display: flex;
  align-items: start;
  gap: 1rem;
  width: fit-content;
  height: 500px;
  border: 5px solid black;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #03af7a;
  border: 5px solid white;
  box-sizing: border-box;
}

.sticky {
  position: sticky;
  top: 0;
  border: 5px solid #f6aa00;
  box-sizing: border-box;
}