【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ならバックスロール
こんな記事も読まれています。
-
【HTML】【CSS】【javascript】電卓の作り方
電卓のソースコードを２つ紹介します。javascriptはわずか数行で書けます。
-
【JacvaScript】【CSS】たった4行のJavaScriptでできるハンバーガーメニューの作り方
たった4行のJavaScriptで作るハンバーガーメニューの作り方について紹介します。✖をつくるには、transform-originがポイントです。
- リンク
-
波紋エフェクトを表現するjqueryのripples-min.jsの使い方
jqueryのripples-min.jsを使うと簡単に水面の波紋を表現できます。波紋の広がりの速度、波紋の大きさ、波紋のブレの値を変えていろいろ表現させると面白いです。
-
【Javascript】querySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法。
JavascriptのquerySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法について解説します。querySelectorと同じように書いてしまうとエラーがでます。forEachを使うとすべてに適用できます。
- リンク
-
要素の高さを取得する方法。getBoundingClientRectとは？window.innerHeightとは？window.pageYOffsetとは？
要素の高さを取得する方法について解説します。getBoundingClientRect、window.innerHeight、window.pageYOffsetについて理解し、要素がいつ画面に現れるかを把握できるようにしましょう。
-
Javascriptを使ったページネーションの実装
トップページの記事が増えてきたので、何とかページネーションで最新の記事だけを表示できないかと思っていたら、いい記事を発見しました。カスタマイズして実装することができました。
- リンク
-
【Javascript】マウスの指す(X, Y)座標とドラッグ & ドロップを理解する
マウスの指す(X, Y)座標とドラッグ & ドロップについて解説します。mousedown, mouseover, mousemove, mouseupを使います。
-
【javascript】連想配列をテーブルできれいに表示する方法
javascript（Object.entries）を使って、連想配列の中身をテーブルできれいに表示する方法について紹介します。
- リンク
