【簡単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）を使って途中から要素を固定したい方はこちらの記事を参考にしてください。
目次
