ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

【CSS】stickyの使い方 ヘッダー、サイドバー、表の見出しを固定表示【IE対応】

【CSS】stickyの使い方 ヘッダー、サイドバー、表の見出しを固定表示【IE対応】

「スクロールしたあとに、ヘッダー、サイドバー、表の見出しを固定表示させたい」
「position:sticky;の使い方を知りたい」
「どうせposition:sticky;も、IEだと使えないんじゃないの?」

悩み

こんな悩みにお答えします。

私は、2015年頃からWeb制作の仕事をはじめて、160件ほどのWebサイトを制作してきました。
position:sticky;はIEでは使えないと思い込んでいて、これまで実案件では使ってきませんでしたが、ポリフィルを使うことでIEにも対応させられることがわかりました。

そこで、この記事では、position:sticky;の使い方、IEの対応方法を解説しています。

stickyのデモ

この記事を読めば、難しいJavaScriptやjQueryを知らなくても、ヘッダーやサイドバーなどを固定させる方法がわかります。

目次
  1. position:sticky;とは
  2. 使い方
    1. 基本的な使い方
    2. IE対応方法
  3. まとめ

position:sticky;とは

position:sticky;はスクロールしているとき、指定の位置まできたら要素を固定表示させることができるCSSです。

これまではposition:fixed;とJavaScriptを使い、スクロール位置や要素の位置を取得、計算などしながら指定していくことをしていて、プラグインを使わないとても大変でした。

position:sticky;なら、JavaScriptも必要なく簡単に実現させることができます。
(IE対応にはJavaScriptが必要になります)

以下の用途で使うことが多いです。

  • 2カラムのときのサイドバー内の要素
  • ヘッダー
  • グローバルナビ
  • 表の見出し(IE対応不可)
POINT
position:sticky;はスクロールしてからの固定表示に簡単に対応できる!

使い方

基本的な使い方

使い方はCSSを指定するだけなのでとても簡単です。
固定させたい要素に以下を指定います。

h2{
  position: sticky;
  top: 0;
}

position:sticky;を指定する要素の、先祖要素にoverflow:hidden;があると、position:sticky;が効かないので注意が必要です。

簡単なデモを作成しました。
stickyのデモ

ヘッダー、メインの見出し、サイドバー、表の見出しのメニューをposition:sticky;に対応させています。

表の見出しはtable要素をdivで囲って、そのdivにoverflow:auto;を指定します。
IEではpolyfillを使ってもstickyが効きません。

POINT
先祖要素にoverflow:hidden;があると、position:sticky;が効かないので注意!

IE対応方法

当然のごとく、IEでは「position:sticky;」がサポートされていません。
polifil「stickyfill」を読み込むことでIEに対応させます。

表の見出し(table要素)だけは、「stickyfill」を使ってもIEに対応させることができませんでした。
ただ、IEだと表がくずれるというわけではなく、見出しが固定されないだけなので、これが許されるのであれば使うことができます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/stickyfill/2.1.0/stickyfill.min.js"></script>

wilddeer/stickyfill

Polyfill for CSS `position: sticky`. Contribute to wilddeer/stickyfill development by creating an account on GitHub.

以下を「stickyfill」の読み込みより下にコピペします。
class名はそれぞれの環境に合わせて変更してください。

// JavaScript
<script>
  var elements = document.querySelectorAll(".sticky");
  Stickyfill.add(elements);
</script>

// jQuery
<script>
  var elements = $('.sticky');
  Stickyfill.add(elements);
</script>

まとめ

position:sticky;の使い方を紹介しました。

  • 2カラムのときのサイドバー内の要素
  • ヘッダー
  • グローバルナビ
  • 表の見出し(IE対応不可)

「stickyfill」を使えばIEにも対応させられるので、今後のコーディングが効率的にできるようになっていくと思います。