【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; /* 前面に表示されるようにする */
}

スポンサーリンク

JavaScript

Posted by ton