ヘッダーやサイドバーコンテンツ、またコンバージョン要素などで、スクロールしてその要素の位置まで来ると、スクロールに対して固定表示されるような表示をよく見かけますよね。そういった要素のことはスティッキー要素と呼ばれるのですが、今回は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だけでスクロールに合わせて固定レイアウトができるスティッキー要素の作成についてまとめてみました。ちなみにこの方法は古いブラウザでは対応していないものもあるので、あくまでモダンブラウザ限定の手法になりますので注意が必要です。