【JavaScript・CSS】スクロールの上下で表示・非表示を切り替える方法｜固定ヘッダーの例

今回はJavaScript・CSSを利用し、スクロールの上下を判断して、要素の表示・非表示を切り替える簡単な例となります。

【JavaScript・CSS】スクロールの上下で表示・非表示を切り替える例

以下のJavaScript・CSSの例では、画面上部に固定したヘッダーを、下スクロール時には非表示、上スクロール時には表示させています。

See the Pen JavaScript scroll up down judgement sample by yic666kr (@yic666kr) on CodePen.

JavaScriptの簡単な説明

JavaScriptの簡単な説明となります。

以下のスクロールイベントでは、スクロール時に、現在と1つ前のスクロール位置を比較し、スクロールの上下を判断しています。

そして、スクロールの上下によって、ヘッダーの要素のclassの値を変更しています。

const fixedElm = document.getElementById('header');
let scrollPoint = 0; // 現在のスクロール位置をセットする変数
let lastPoint = 0; // 1つ前のスクロール位置をセットする変数

window.addEventListener("scroll",function(){
	
	scrollPoint = window.scrollY;
	
	if(scrollPoint > lastPoint){ // 下スクロールの場合
		fixedElm.classList.add('fixed-hide');
	}else{ // 上スクロールの場合
		fixedElm.classList.remove('fixed-hide');
	}
	
	lastPoint = scrollPoint;
});

要素のclassの値を扱う方法

要素のclassの値を扱う方法については、以下のリンク先を参考にしてみてください。

【JavaScript】classの値を取得・追加・削除・変更など｜classListでCSSのclassを扱う

CSSの簡単な説明

CSSのコードの簡単な説明となります。

ヘッダーの要素は、JavaScriptを利用してclassの値fixed-hideを付与・削除しています。

それにより、topプロパティの値を変更してヘッダーの表示・非表示を切り替えています。また、transitionプロパティを指定して要素の変化をアニメーションさせています。

以下の箇所はヘッダーの要素に対してのCSSとなります。

#header{
	position: fixed;
	top: 0;
	z-index: 20;
	
	display: flex;
	justify-content: center;
	align-items: center;
	
	width: 100%;
	height: 45px;
	background-color: #aaa;
	transition: all 0.3s ease-out;
}
#header.fixed-hide{
	top: -45px;
}