備忘録的プログラミングリファレンス

control of scroll position

 スクロールによるエレメントの位置を、position:sticky;によって変更することができます。

動作の確認

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

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

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

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

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

別ページで開きます。

HTML

 ここでは、ナビゲーションメニューがスクロールによって最上部に到達すると固定します。

css

 領域のスクロールの様子が分かりやすいように赤い点線が入っています。

 <footer>と共にナビメニューがスクロールするように高さを500pxとしています。

JavaScript