メニューバーや上部のロゴなど、スクロールに応じて要素の表示・非表示を切り替える必要がある場合に使えるコードです。

HTML

<div class="sample">ダミーテキスト</div>

表示・非表示を切り替えたい要素に.sampleというクラスを付与します。

JavaScript

document.addEventListener("DOMContentLoaded", function() {
	var pos = 0;
	window.addEventListener('scroll', function() {
		var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
		if (scrollTop < pos) {
 			document.querySelector('.sample').classList.remove('hide');
		} else {
 			document.querySelector('.sample').classList.add('hide');
		}
		pos = scrollTop;
	});
});

下スクロールすると.sampleに.hideというクラスが付与され、上スクロールするとそれが削除されます。

jQuery版

jQueryを使用する場合はこちらです。

$(function(){
	var pos = 0;
	$(window).on('scroll', function(){
		if($(this).scrollTop() < pos ){
			$(".sample").removeClass('hide');
		}else{
			$(".sample").addClass('hide');
		}
		pos = $(this).scrollTop();
	});
});

CSS

.sample{
	opacity: 1;
	transition: 0.5s;
}
.sample.hide{
	opacity: 0;
}

.hideが付与された状態だとopacityが0になるので透明になります。変化時間は0.5秒です。

実際の動作

See the Pen Untitled by Leo_8192 (@Leo_8192) on CodePen.

スクロールして動作を確認してみてください。

応用

opacityではなくtransformを使えば、スライドインのエフェクトを実装することも可能です。

上から降りてくるタイプ

.sample{
	transform: translateY(0);
	transition: 0.5s;
}
.sample.hide{
	transform: translateY(-100%);
}