2023/5/2

position:sticky を使って広告をスクロールに追従させる


サイドに表示するタイプの広告を、スクロールに追従させる方法です。
javascrpitでも可能ですが、CSSのみで簡単に実現可能です。

「position:sticky」を使用します。

ちなみに、本ブログでも採用していて、例えば以下のページで使っています。
※スマホだと幅が足りなくて表示されません。

実装方法

使い方は簡単で、追従させたい要素に以下を追加します。

position: sticky;
top: 0;

Code Penにコードを登録してみました。
flex gridでメインパートとサイドパートに分けて、サイドにある広告をstickyとしています。

See the Pen Untitled by yamaccu (@yamaccu) on CodePen.

■注意事項


以上です。




コメント(githubのアカウントが必要です)