CSSのposition: sticky;でスクロール時にレイアウトを固定できるスティッキー要素を作成する
最終更新日: Update!!
ヘッダーやサイドバーコンテンツ、またコンバージョン要素などで、スクロールしてその要素の位置まで来ると、スクロールに対して固定表示されるような表示をよく見かけますよね。そういった要素のことはスティッキー要素と呼ばれるのですが、今回はCSSでスティッキー要素を実装して固定のレイアウトを作成してみたいと思います。
実は過去記事「jQueryで特定の位置で切り替わるスクロール時の固定と解除を切り替え」ではJavaScriptを使って、スクロールの基準点となる座標から、positionプロパティのfixedを切り替えることでスクロールに対応した固定ができるスティッキー要素の作成方法をまとめていました。ただ、今回はJavaScriptを使わずCSSだけで対応できるというのがメリットです。
早速コードを見ていきましょう。今回はこのようなHTMLでシンプルな2カラムレイアウトになっています。サイドコンテンツにスクロールで固定ができるスティッキー要素を配置しています。
【HTML(Pug)】※一部抜粋
今回はCSSだけでスクロールに合わせて固定レイアウトができるスティッキー要素の作成についてまとめてみました。ちなみにこの方法は古いブラウザでは対応していないものもあるので、あくまでモダンブラウザ限定の手法になりますので注意が必要です。
header main. メインコンテンツ aside div.sticky. 固定コンテンツ footer続いてCSSの方ですが、今回のスティッキー要素を実装するにあたって必要となるのは2つのプロパティだけで出来てしまいます。 【CSS(SASS)】※一部抜粋
div.sticky position: sticky top: 10px固定したい要素に対して、position: sticky;を指定し、位置指定のプロパティで値を設定するだけでOKです。上記ではウィンドウの上端から10pxだけ移動させた位置に固定されるようになっています。もちろんbottomで下部に配置させることもできます。 たったこれだけでスティッキー要素が作成することができました。今回のサンプルは下記のようになっていますので実際にスクロールして確認してみてください。
See the Pen sticky-content_on_css by designsupply (@designsupply) on CodePen.
overflow: hidden;との併用に注意
なお、親要素もしくは先祖要素に「overflow: hidden;」を設定している場合にはこのposition: sticky;を使った方法が効かなくなるので注意が必要です。その場合にはJavaScriptを使ってスクロールイベントによりposition: fixed;の指定を動的に切り替える必要があります。今回はCSSだけでスクロールに合わせて固定レイアウトができるスティッキー要素の作成についてまとめてみました。ちなみにこの方法は古いブラウザでは対応していないものもあるので、あくまでモダンブラウザ限定の手法になりますので注意が必要です。
sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
- ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
categories