Contents実現したいことヘッダーを画面上部に固定するヘッダー表示・非表示の設定(CSS)JavaScriptでウィンドウをスクロールしたら実行する関数を作成スクロール時に実行する関数を作成ページの最下部に到達したらヘッダーを表示するデモ参考サイトtips_javascript下へスクロールすると隠れて、上にスクロールすると表示されるヘッダー2019-11-17ウィンドウを下へスクロールすると隠れ、上にスクロールすると表示されるヘッダーの作り方です。下へスクロールすると隠れる仕様の場合、ウィンドウがページの最下部に到達したときもヘッダーが隠れたままになるため、最後までページ内のコンテンツを見終えた時点で再度ヘッダーを表示させるようにします。CSSは動作に必要な部分のみを記述しています。CSSのベンダープレフィックスは最新2バージョンを対象としています。ヘッダーを画面上部に固定するhtmlにヘッダーを作成します。画面上部に固定します。100%;}ヘッダー表示・非表示の設定(CSS)ヘッダーの表示・非表示はclass名の追加・削除で行います。画面の最上部の位置に戻します。プロパティで指定します。scrollを対象にして設定し、実行したい関数を指定します。onScroll();});上下どちらにスクロールした場合も、コンソールに「scroll」と表示されます。指定量スクロールしたらヘッダーを隠すようにします。window.scrollYで取得します。場合にclass名を追加します。onScroll();});ヘッダーの高さあたりをスクロールすると、classが付いたり取れたりします。場合にclass名の追加を行います。記述した部分を変更します。class名の追加は「スクロール位置がヘッダーの高さ分より大きく且つ最後のスクロール位置より大きい」場合に行うので問題ありませんが、class名の削除をelseで行おうとすると「スクロール位置がヘッダーの高さ分より小さい」ことも必須条件になるため、class名の削除を行う条件を別のif文として記述します。pos;};ヘッダーの高さ分より下の範囲ではどの位置でも、下へスクロールするとヘッダーが隠れ、上へスクロールするとヘッダーが表示されるようになりました。ページの最下部に到達したらヘッダーを表示するページ最下部に到達したかどうかを調べるには、ページ全体の高さからウィンドウの高さを引くとウィンドウが最下部に達した場合のウィンドウ上部の位置が得られます。スクロール量(window.scrollY)がこの位置に到達したらヘッダーを表示するようにします。header.classList.remove('header--unpinned');}スクロールがページの最下部まで到達した際に、ヘッダーが再び表示されるようになりました。