【FE】position: sticky ヘッダー固定するときに非常に便利

ヘッダーやフッターを固定したいなと思った時によく

position: fixed;

を個人的に使いがちだった。 しかし スクロールした時に固定したい という要望が出た時に、 JSでスクロール値とって....という処理が面倒だった。 またブラウザによっては処理が重くカクついてしまう。

何か良い方法はないものかと調べてみた。 すると最近では

position: sticky;

で解決できる！とのことだった。 これは画期的。

サンプルコード

position: sticky サンプル

【html】

<section class="parent-parent">
  <section class="parent">
    親
    <div class="content">
      内容1
    </div>
    <header class="header-sticky">
      固定
    </header>
    <div class="content">
      内容2
    </div>
  </section>
</section>

【css】

// 親の親
.parent-parent{
    height: 2000px;
    background: #8382ee;
}
// 親
.parent{
    box-sizing: border-box;
    padding: 20px;
    width: 100%;
    height: 1000px;
    background: #ddd;
    padding-top: 40px;
}
// 固定にするヘッダー
.header-sticky{
    padding: 20px;
    background: #ee7e7e;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}
.content{
    padding: 20px;
    height: 200px;
    background: #bbffa0;
}

ポイント

サンプルの動画をみてもらうとわかるのだが、 position:sticky を指定している要素のすぐ上の親要素（parent）の高さまでは固定になるのだが、 高さを超えてスクロールすると、固定が解除されるので注意が必要。

ブラウザ対応表

今のところ、ブラウザ対応は以下。

position:sticky ブラウザ対応表

IE以外のほとんどのブラウザで使用が可能。 機会があれば、どしどし使っていきたい。

[参考サイト] https://parashuto.com/rriver/development/position-sticky