More than 3 years have passed since last update.

【CSS】超簡単!!　スクロールに追従する要素を作る

Posted at 2020-12-22

はじめに

スクロールすると動きに合わせて追従してくる方法の紹介です。

追従自体はfixedでできるのですが、指定の場所で追従が終了して欲しい事があると思います。
JSしたり範囲したりする事で可能ではありますが、この記事では「特定の要素の範囲内で追従が終わる」様にする事で超簡単に実装できる方法を紹介します。

HTML 5

以下の記述で、追従する要素はform内でのみ画面上で追従してくる様になります。

html

<div class="form">
  <div class="form-item">
    追従する要素
  </div>
</div>

CSSの記述はposition: sticky;のみです。

css

.form-item {
  position: sticky;
  top: 0;
}

これで完成です。
非常に簡単に実装できるので、よかったら参考にしてください。