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

control of scroll position

　Web ページがスクロールされてもエレメントの位置を留めることができます。
　 スクロールによってもエレメントの位置を変更しないようにするには CSS プロパティの position:sticky; を使用します。

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

　sticky は position プロパティの指定値のひとつで、ウィンドウのスクロール操作時のエレメントの位置を設定できるようにします。

　position:sticky; によるエレメント位置の固定は、ヘッダやナビゲーションメニュー、サイドバーといった要素に利用されることがあります。
　ここではウィンドウスクロール時のエレメントごとに表示位置を固定化する方法を解説します。

Example

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

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