position: sticky;部分的な追従レイアウト
position: sticky; を使用して、一部で追従するレイアウトを構築する。
JSは使用しない。
左半分追従
左半分を追従領域(position: sticky;)とし、右側をスクロール可能なコンテンツとする。
sticky要素の親要素に「overflow-y: visible;」をつけることを忘れずに。
SPの場合はまず画像が出てきて、その後にスクロールコンテンツが上にくるようにした。
SEC02
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
SEC03
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
SEC04
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
SEC05
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
SECseparator
普通のセクション
右半分追従
右半分を追従領域(position: sticky;)とし、左側をスクロール可能なコンテンツとする。
SEC02
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
SEC03
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
SEC04
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
SEC05
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
SECseparator
普通のセクション
ヘッダー追従
指定領域内でのみヘッダーを追従させる。
SEC12
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
SEC13
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
SECseparator
普通のセクション
SECseparator
普通のセクション
フッター追従
指定領域内でのみフッターを追従させる。
SEC12
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
SEC13
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
SECseparator
普通のセクション
SECseparator
普通のセクション
SECseparator
普通のセクション