Ownedmedia ウェブ制作に役立つコンテンツを発信中!

CSS 2020.09.13

CSSのposition: sticky;でスクロール時にレイアウトを固定できるスティッキー要素を作成する

Tags: ,
最終更新日:Update

ヘッダーやサイドバーコンテンツ、またコンバージョン要素などで、スクロールしてその要素の位置まで来ると、スクロールに対して固定表示されるような表示をよく見かけますよね。そういった要素のことはスティッキー要素と呼ばれるのですが、今回はCSSでスティッキー要素を実装して固定のレイアウトを作成してみたいと思います。

 

実は過去記事「jQueryで特定の位置で切り替わるスクロール時の固定と解除を切り替え」ではJavaScriptを使って、スクロールの基準点となる座標から、positionプロパティのfixedを切り替えることでスクロールに対応した固定ができるスティッキー要素の作成方法をまとめていました。ただ、今回はJavaScriptを使わずCSSだけで対応できるというのがメリットです。

 

早速コードを見ていきましょう。今回はこのようなHTMLでシンプルな2カラムレイアウトになっています。サイドコンテンツにスクロールで固定ができるスティッキー要素を配置しています。

【HTML(Pug)】※一部抜粋

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だけでスクロールに合わせて固定レイアウトができるスティッキー要素の作成についてまとめてみました。ちなみにこの方法は古いブラウザでは対応していないものもあるので、あくまでモダンブラウザ限定の手法になりますので注意が必要です。

この記事を書いた人

オガワ シンヤ

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?