【IE11にも対応】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では「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>

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

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

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