はじめに

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

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

開発環境

HTML 5

実装

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

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

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

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

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

参考

https://www.miso.blog/css-position-sticky/