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 プログラミング

【簡単】デフォルト検索にACFカスタムフィールドの値を含める方法【wordpress】

更新日:2022.03.19
2585
WordPress プログラミング

【アドミンバー】WordPressで管理画面にログインしたらページ上部に余白ができるのを解決!

2022.04.14
1238
HTMLCSS jQuery

一枚画像に複数のリンクを場所指定して設置する方法【レスポンシブ対応】

更新日:2022.09.09
2027
HTMLCSS

CSSのhas擬似クラスを使って指定した要素の有無を判別する方法

2023.04.21
551