【javascript】スクロールしたらヘッダーを非表示にし、バックスクロールしたらヘッダーを表示する
やりたいこと
以下のように、スクロールしたらヘッダーを非表示にし、 バックスクロールしたら、ヘッダーを表示させる 方法について紹介します。
ヘッダーの高さはわずかですが、 時に見たい部分が多く表示されない場合があります。 特に、ページを開き、内容を見たい時にヘッダーが邪魔になることがあります。 逆に、バックスクロールする時は、内容をだいたい見終わった後なので、 ヘッダーを表示させることにより、ほかのページを見てもらう機会を増やすことができます。
CSS
2行目 : 最初はheaderを position: fixed にして、上部に固定しておきます。
5行目 : transition を指定しておくことで、少しオシャレになります。
header{
position: fixed;
width: 100%;
top: 0;
transition: .8s ease;
}javascript
3-4行目 : 前回スクロール量と 現在のスクロール量を 表す変数を宣言
6行目 : スクロールイベント
10行目 : scrolled > previousScroll : 現在のスクロール量が前回より大きい時、つまり スクロールした時
11行目 : else(scrolled < previousScroll) : 現在のスクロール量が前回より小さい時、つまり バックスクロールした時
const header = document.querySelector("header");
let previousScroll = 0; // 前回のスクロール量
let scrolled = 0; // 現在のスクロール量
window.addEventListener("scroll", ()=>{
previousScroll = scrolled;
scrolled = window.pageYOffset
if(scrolled > previousScroll){ // スクロールした時
header.style = "position: absolute; top: -100%"; // headerを画面外へ非表示
}else{ // バックスクロールした時
header.style = "position: fixed; top: 0"; // headerを再表示
}
});参考
まとめ
以上、スクロールしたらヘッダーを非表示にし、 バックスクロールしたらヘッダーを再度表示させる方法 について紹介しました。
意外と簡単にスクロールなのかバックスクロールなのか判定でき、 実装することができます。
- previousScroll(前回のスクロール量)を宣言
- scrolled(現在のスクロール量)を宣言
- スクロールイベントで、
scrolled > previousScrollならスクロール、
scrolled < previousScrollならバックスロール
