指定した要素を固定する[position: sticky;]

概要

ヘッダーを固定したい場合、position:fixed;を使うとすぐ実装できますが、画面途中にある要素を固定したい場合はposition:sticky;が使うことで実装することができます。

こういうの↓

実装

<div class="wrapper">
    <div class="tab">
    <!--固定したい要素-->
    </div>
    <div class="pages">
    </div>   
</div>
<style>
    .tab{
        position: sticky; 
        top:0;  /*固定したい場所を指定*/
        z-index: 100; /*一番上に持ってくる*/
    }
</style>

親要素が自動的にコンテナとして定義される。
親要素内(今回だったらwrapper)でしかうまく作動しないので注意が必要。

まとめ

めんどくさそうだと思ったら簡単に実装ができました。

参考文献

position: sticky;の仕組みや実際の使い方をやさしく解説