2023/5/2
position:sticky を使って広告をスクロールに追従させる
サイドに表示するタイプの広告を、スクロールに追従させる方法です。
javascrpitでも可能ですが、CSSのみで簡単に実現可能です。
「position:sticky」を使用します。
ちなみに、本ブログでも採用していて、例えば以下のページで使っています。
※スマホだと幅が足りなくて表示されません。
M5StickCを使ってダイソーの忍者刀を日輪刀に改造
ダイソーに売っている忍者等を改造して日輪刀にします。
実装方法
使い方は簡単で、追従させたい要素に以下を追加します。
position: sticky;
top: 0;
Code Penにコードを登録してみました。
flex gridでメインパートとサイドパートに分けて、サイドにある広告をstickyとしています。
See the Pen Untitled by yamaccu (@yamaccu) on CodePen.
■注意事項
- "top"の指定を忘れると反映されません。
- stickyを指定した要素の親要素内でしか機能しないので、親要素ごとスクロールしてしまうと追従できません。
以上です。