control of scroll position

動作の確認

　ここでは、CSSだけでスクロールによるエレメントの位置を操作します。以下のプロパティを使用します。position:sticky;が設定されたエレメント以降はスクロールします。

position: sticky;	...エレメントの位置操作の宣言
top: 0;			...エレメントの固定位置
z-index: 100;		...前後のエレメントの配置順

　固定したエレメントも内容の変化とともに動かすことができます。例では、親エレメントとの兄弟のエレメントであるFOOTER領域が、position:sticky;を設定したエレメントに到達すると、その設定されたエレメントも動き出します。

　そのためには、親エレメントを包括するエレメントが必要です。HTML例における、<div class="base">です。

　cssあり/なし、scriptあり/なしを選択することができます。HTMLだけなら、CSSありで、scriptありでと確かめることができます。

CSSあり scriptあり 別ページで開きます。