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

テキストテキストテキストテキスト

テキストテキストテキストテキスト

テキストテキストテキストテキスト

テキストテキストテキストテキスト

追従エリア#2

SECseparator

普通のセクション

SECseparator

普通のセクション

SECseparator

普通のセクション