はじめに

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

追従自体は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;
}

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