jQueryで簡単実装！上スクロール時に表示されるヘッダーの作り方
- 記事をシェアする：
-
-
-
今回は、jQueryで簡単に実装できる、上スクロール時に表示されるヘッダーの作り方をご紹介します。
スクロール時に出たり引っ込んだりするヘッダーメニューに出会ったことがあると思います。
ただ今回は、「下へスクロールしているときは非表示」、「上へスクロールしているときは表示」
といった特徴のヘッダーメニューです。
コピペで使用可能です。担当されている案件のデザインに合わせてご使用ください。
デモ：完成のイメージ
まずは、簡単なデモをご覧ください。
クラスの付け外しによって、上スクロール時とページ最上部時のヘッダーのスタイルを変化させています。
ソースコード解説
上記デモに使用したソースコードを、HTML、CSS、jQueryに分けて解説していきます。
HTMLの解説
<header id="header" class="header js-header">
<div class="header__inner">
<h1 class="header__logo">
<a href="#">LOGO</a>
</h1>
<nav aria-label="メインナビゲーション">
<ul>
<li><a class="header__link" href="#">トップページ</a></li>
<li><a class="header__link" href="#">サービス</a></li>
<li><a class="header__link" href="#">お問い合わせ</a></li>
</ul>
</nav>
</div>
</header><header>にjs-headerクラスをあらかじめ付与し、jQueryで操作します。<nav>にaria-labelを設定し、アクセシビリティに配慮しています。
CSS（SCSS）の解説
次にCSSです。
ここでは主に、is-fixed（固定時のスタイル）、is-hide（下スクロール非表示のスタイル）、is-top（ページトップ時のスタイル）を行っています。
body {
height: 300vh; // スクロールを十分に発生させるための高さ
}
.header {
position: fixed;
width: 100%;
top: 0;
left: 0;
padding: 15px;
background-color: white;
transition: 0.3s all ease;
&__inner {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
}
a {
text-decoration: none;
color: inherit;
}
nav {
ul {
display: flex;
list-style: none;
li {
&:nth-child(n + 2) {
margin-left: 20px;
}
}
}
}
/* 固定時のスタイル */
&.is-fixed {
background-color: black;
color: white;
}
/* ヘッダーを非表示（下スクロール時） */
&.is-hide {
background: none;
transform: translateY(-100%);
}
/* ヘッダーがトップにあるときのスタイル */
&.is-top {
background-color: white;
}
}position: fixed;によりヘッダーを常に固定.is-fixedでスクロール時の背景色を変更.is-hideで下スクロール時にヘッダーを非表示.is-topでページトップ時のスタイルを適用
デモで操作するとわかりやすいですが、is-fixedに通常時と異なるスタイルを指定することで、上スクロール時とページトップ時の見た目に差をもたせることができます。
また、.headerにis-topと同じ背景を指定することで、背景色のちらつきを予防しています。
jQueryの解説
次は、jQueryです。
ここでは、スクロール量を監視し、各状態に合わせてクラスを付与しています。
$(document).ready(function () {
const header = $(".js-header");
const fixedClass = "is-fixed";
const hideClass = "is-hide";
const topClass = "is-top";
let lastScrollY = 0; // 前回のスクロール位置
$(window).on("load scroll", function () {
let currentScrollY = $(this).scrollTop();
// スクロールが0より大きい場合は固定
if (currentScrollY > 0) {
header.addClass(fixedClass);
} else {
header.removeClass(fixedClass);
}
// スクロール方向に応じてヘッダーを表示・非表示
if (currentScrollY > lastScrollY) {
header.addClass(hideClass); // 下にスクロール → ヘッダーを隠す
} else {
header.removeClass(hideClass); // 上にスクロール → ヘッダーを表示
}
// トップにいる場合はトップクラスを付与
if (currentScrollY === 0) {
header.addClass(topClass);
} else {
header.removeClass(topClass);
}
// スクロール位置を更新
lastScrollY = currentScrollY;
});
});currentScrollY > 0でスクロール時に.is-fixedクラスを追加。currentScrollY > lastScrollYのとき.is-hideを追加し、下スクロール時にヘッダーを隠す。currentScrollY === 0で.is-topを追加し、トップページ時のデザインを適用。lastScrollYを更新し、次回のスクロールイベントで比較できるようにする。
まとめ
今回の記事では、jQueryを使って上スクロール時にヘッダーを表示し、下スクロール時に隠す方法を紹介しました。
ポイントのおさらい
position: fixed;でヘッダーを固定is-fixedでスクロール時のスタイルを適用is-hideで下スクロール時に非表示is-topでページトップ時のスタイル適用
今回のコードをカスタマイズして、自分のサイトに合ったデザインに変更してみてください！
最後までお読みいただきありがとうございました。
それでは、また別記事でお会いいたしましょう！
