【javaScript】スクロールすると要素が隠れるようにする
下にスクロールすると、ヘッダのメニューが消えて、上にスクロールすると再度表示されるようなサイトありますよね。
これをどう作るかというと！！
[サンプル]
左上に表示されている「下にスクロールで消えて、上にスクロールで出現」の文章が上や下にスクロールすると消えたり現れたりする。
下にスクロールで消えて、上にスクロールで出現
[index.html]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div id="scrollArea">下にスクロールで消えて、上にスクロールで出現</div>
<!-- ここに<br>をいっぱい書いてスクロールバーが表示されるようにして試してね -->
<script src="index.js"></script>
</body>
</html>[index.js]
var startPos = 0, winScrollTop = 0;
// scrollイベントを設定
window.addEventListener('scroll', function () {
winScrollTop = this.scrollY;
if (winScrollTop >= startPos) {
// 下にスクロールされた時
if (winScrollTop >= 200) {
// 下に200pxスクロールされたら隠す
document.getElementById('scrollArea').classList.add('hide');
}
} else {
// 上にスクロールされた時
document.getElementById('scrollArea').classList.remove('hide');
}
startPos = winScrollTop;
});[index.css]
.hide{
transform: translateY(-100%); /* 上に消えるようにする */
}
#scrollArea{
background-color: rgb(255, 0, 0); /* 見やすいように背景色を赤に */
position: fixed; /* 固定して表示されるようにする */
top: 0; /* 表示場所を一番上に */
transition: .5s; /* スクロール時に一瞬で消えると物足りないので.hideの処理を0.5秒で行う */
z-index: 100; /* 前面に表示されるようにする */
}