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

control of scroll position with JavaScript

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

 エレメントの位置を固定するためにCSSでプロパティ設定をしておきます。例では、CSSにおけるクラス名stickyです。

動作の確認

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

別ページで開きます。

HTML

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

css

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

CSSにおけるクラス名stickyは、エレメントの位置を固定するためのプロパティ設定です。

JavaScript

 この例では、ナビメニューをある位置までスクロールしたら固定しますが、幅に変化があるためにwidth値の取得と設定を行っています。