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

目次

関連記事

プログラミング

ドラゴンボール超ブロリー映画のあらすじ・感想を解説!【記事最後にネタバレ有り】

更新日:2020.04.09
500
WordPress プログラミング

【簡単】wordpressプラグインで投稿記事を非公開予約する方法

2022.01.05
2818
HTMLCSS プログラミング

CSSで上付き・下付き注釈をつける書き方【コードペンデモ有り】

更新日:2020.04.21
872
HTMLCSS

APIを使わず、GoogleMapを白黒でサイトに埋め込む方法

更新日:2022.06.08
1022