jQuery Web制作

【jQuery】下にスクロールで消えて上にスクロールで表示するヘッダーの作り方

※ 当サイトではアフィリエイト広告を利用しています

下にスクロールしたらヘッダーを隠して、上にスクロールしたらヘッダーを表示することってできる?

ページをスクロールして読んでいると、ヘッダーが邪魔だと思ったことありませんか?

そんな時は、下にスクロールしている時はヘッダーを上に引っ込ませて、上にスクロールしてページを戻っている時だけヘッダーを表示するということができます。

今回は、jQueryを使った方法を解説していきます。

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 30日間でWeb制作を学べる
  • 完全無料
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 受付は1日25名までの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

\ 完全無料 /

ZeroPlus Gate公式サイト

先着1日25名まで!

下にスクロールで消えて上にスクロールで表示するヘッダーの作り方

今回はjQueryを使うので、jQueryを使ったことがない人は、まずは以下の記事を参照下さい。

【初心者向け】jQueryとは?CDNを使った本体の読み込み方についても分かりやすく解説
【初心者向け】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.

まとめ

今回は、下にスクロールで消えて上にスクロールで表示するヘッダーの作り方を解説してきました。

最初のセクションを過ぎるまでは固定させたい場合は、以下の記事を参照下さい。

あわせて読みたい
最初のセクションを過ぎたら上に消えて上にスクロールすると表示されるヘッダーの作り方
最初のセクションを過ぎたら上に消えて上にスクロールすると表示されるヘッダーの作り方

続きを見る

以上になります。

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-jQuery, Web制作