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

Ads

関連記事

JavaScript プログラミング

【簡単】slickスライダーでサムネイルを連動・固定2列2段以上で表示させる方法

2022.01.27
919
JavaScript プログラミング

スクロール中、要素をふわっと出す。scrollrevealjs の使い方について【簡単便利】

2019.12.01
108
JavaScript プログラミング

左右に見え隠れするスライダーを高さ固定で実装する方法【swiperを使用】

2020.07.14
269
WordPress プログラミング

【簡単】jQueryを使って、wordpressのRSSを取得し記事を表示する方法【プラグイン不要】

2022.01.21
394