![](https://junpei-sugiyama.com/wp-content/uploads/2021/07/Question-1024x1024.png)
ページをスクロールして読んでいると、ヘッダーが邪魔だと思ったことありませんか?
そんな時は、下にスクロールしている時はヘッダーを上に引っ込ませて、上にスクロールしてページを戻っている時だけヘッダーを表示するということができます。
今回は、jQueryを使った方法を解説していきます。
下にスクロールで消えて上にスクロールで表示するヘッダーの作り方
今回はjQueryを使うので、jQueryを使ったことがない人は、まずは以下の記事を参照下さい。
-
【初心者向け】jQueryとは?CDNを使った本体の読み込み方も分かりやすく解説
続きを見る
早速コードを解説していきます。
HTML
<header class="header">
<nav class="header-nav">
<ul class="header-list">
<li class="header-item"><a href="#anchor01">HOME</a></li>
<li class="header-item"><a href="#anchor02">ABOUT</a></li>
<li class="header-item"><a href="#anchor03">SHOP</a></li>
<li class="header-item"><a href="#anchor04">NEWS</a></li>
</ul>
</nav>
</header>
<!-- メインコンテンツ -->
<main>
<section class="section01" id="anchor01">
<h2 class="section-title">HOME</h2>
</section>
〜中略〜
</main>
HTMLは特に変わった点はありません。
CSS
/* スムーズスクロールとヘッダーのスタイル */
html {
scroll-behavior: smooth; /* スムーズスクロールを有効化 */
}
/* ヘッダー部分のスタイル */
.header {
background-color: #ff9393; /* 背景色 */
color: #fff; /* テキスト色 */
position: fixed; /* 固定 */
top: 0; /* 上からの位置 */
transition: top .5s; /* アニメーション効果を追加 */
width: 100%; /* 幅を100%に */
}
/* ヘッダーリストのスタイル */
.header-list {
align-items: center; /* 垂直方向中央揃え */
display: flex; /* 横並びに配置 */
height: 70px; /* ヘッダーの高さ */
justify-content: center; /* 左右中央寄せ */
}
/* ヘッダーアイテムのスタイル */
.header-item a {
color: #fff; /* テキスト色 */
padding: 10px; /* 内側の余白 */
text-decoration: none; /* デフォルトの下線を消す */
}
CSSので重要なのはこちらです。
/* ヘッダー部分のスタイル */
.header {
position: fixed; /* 固定 */
top: 0; /* 上からの位置 */
transition: top .5s; /* アニメーション効果を追加 */
}
ヘッダーは常に固定した状態です。
あとは上からスルッとスライドするように、transition: top .5s;
でアニメーションにしています。
jQuery
$(document).ready(function () {
// ウィンドウのスクロール量を保持する変数
let start_position = 0,
window_position;
// ヘッダー要素を取得
const header = $("header");
// スクロールイベントを設定
$(window).scroll(function () {
// 現在のウィンドウのスクロール量を取得
window_position = $(window).scrollTop();
// ヘッダーの高さを取得
const headerHeight = header.outerHeight();
// スクロール量が初期位置より小さい場合、上にスクロールしているのでヘッダーを表示
if (window_position <= start_position) {
header.css("top", "0");
} else {
// スクロール量が初期位置より大きい場合、下にスクロールしているのでヘッダーを非表示
header.css("top", -headerHeight + "px");
}
// 現在の位置を更新
start_position = window_position;
});
// ページ読み込み時に中途半端な位置でロードされたときでも正しくヘッダーの表示を設定するためにスクロールイベントを発生させる
$(window).trigger("scroll");
});
これはヘッダーの高さを取得して、その分を上に移動してヘッダーを隠している形になります。
今回の場合、ヘッダーの高さは70pxなので、top: -70px;
になります。
また、ヘッダーの高さが変わっても問題ありません。
なので、コードはこのまま何もいじらなくてOKです。
デモ
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
JavaScriptの場合
今回はjQueryを使う方法を解説しましたが、JavaScriptでも出来ます。
先ほどのjQueryをこちらに変えます。
// ウィンドウのスクロール量を保持する変数
let start_position = 0,
window_position;
// ヘッダー要素を取得
const header = document.querySelector("header");
// スクロールイベントを設定
window.addEventListener("scroll", function () {
// 現在のウィンドウのスクロール量を取得
window_position = window.scrollY;
// ヘッダーの高さを自動で取得
const headerHeight = header.offsetHeight;
// スクロール量が初期位置より小さい場合、上にスクロールしているのでヘッダーを表示
if (window_position <= start_position) {
header.style.top = "0";
} else {
// スクロール量が初期位置より大きい場合、下にスクロールしているのでヘッダーを非表示
header.style.top = -headerHeight + "px";
}
// 現在の位置を更新
start_position = window_position;
});
// ページ読み込み時に中途半端な位置でロードされたときでも正しくヘッダーの表示を設定するためにスクロールイベントを発生させる
window.dispatchEvent(new Event("scroll"));
デモはこちら。
See the Pen
下にスクロールで消えて上にスクロールで表示するヘッダー(JavaScript) by junpei (@junpei-sugiyama)
on CodePen.
まとめ
今回は、下にスクロールで消えて上にスクロールで表示するヘッダーの作り方を解説してきました。
最初のセクションを過ぎるまでは固定させたい場合は、以下の記事を参照下さい。
-
最初のセクションを過ぎたら上に消えて上にスクロールすると表示されるヘッダーの作り方
続きを見る
以上になります。
![](https://junpei-sugiyama.com/wp-content/uploads/2021/07/Joy-1024x1024.png)