Written by Kasumi

【簡単CSS】ある要素位置までスクロールしたらその要素を固定する方法【JavaScript不要】

グロナビやサイドバーのバナーなど、ある要素位置まで下にスクロールしたらその要素を固定させて表示したい。

逆に上にスクロールして、ある要素位置を過ぎたら固定を解除したい。

本記事ではCSSのposition: sticky;を使って、このような悩みを解決します。

実装サンプル

See the Pen
要素を固定表示 CSS
by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

下にスクロールしてnav要素とsidebar要素位置まできたら上部に固定されてるのがわかります。

逆に上にスクロールしたら固定が解除されてます。

固定したい要素にCSSでposition: sticky;を付与

nav {
  position: sticky;
  top: 0;
}

実装方法は至ってシンプル。

固定したい要素にposition: sticky;プロパティを付与するだけでOKです。

topプロパティなど使って固定したときの位置も指定・調整できます。

以上の方法で解決します。

まとめ

簡単な固定配置であれば本記事で紹介したCSSのposition: sticky;で実装できます。

スクロール位置を決めて、途中から要素を固定したい場合はJavaScript(jQuery)を使って実装した方が良いです。

JavaScript(jQuery)を使って途中から要素を固定したい方はこちらの記事を参考にしてください。

目次

関連記事

WordPress プログラミング

【ワードプレス】親子カテゴリ・親子ターム順にリンクリストを自動で表示する方法

更新日:2022.05.31
3461
WordPress プログラミング

Advanced Custom Fields でオプションページに投稿タイプを作成する方法

2022.04.24
3263
HTMLCSS プログラミング

HTML・CSSのみで開閉アコーディオンを作る【JS不要簡単】

2020.04.12
4108
HTMLCSS

CSSだけでborder線にグラデーションを入れる方法【角丸も付ける】

2022.06.17
8214