CSS エリア内でコンテンツが追従する position:sticky; の使い方

CSS 指定エリア内でコンテンツが追従する position:sticky; の使い方を紹介します。
例えば、サイドバー内の要素をスクロールに合わせて追従させたい時に便利な方法です。

1. 指定エリア内でコンテンツを追従させる方法
2. position:sticky; が動作しない時の対処方法

指定エリア内でコンテンツを追従させる方法

スクロールに合わせたコンテンツの追従は、jQuery をトリガーに、position:fixed; を付与するような実装方法がよく知られています。
けれど CSS の position:sticky; を使うと、CSSの記述だけで実装することができます。
例えば、サイドバーにあるバナーエリアを、スクロールに合わせて追従するようにするには、次のコードをバナーエリアに追加します。

.banner {

  position: sticky;

  top: 0;

}

まず position に sticky を指定。
次に、追従時の位置を決めるために top right bottom left のどれかを指定します。
実装はこれだけで完成です。

position:sticky; が動作しない時の対処方法

position:sticky; は祖先要素に overflow: hidden; が指定されていると動作しません。
追従が動作しない時は、親要素から祖先要素の overflow の指定を確認してください。

まとめ

CSS 指定エリア内でコンテンツが追従する position:sticky; の使い方を紹介しました。