Web制作 jQuery

【jQuery】特定の位置までスクロールしたら固定ヘッダーの色やサイズを変更する方法【サンプル付きで解説】

特定の位置までスクロールしたら固定ヘッダーの高さを低くしたいけど出来る?

例えばページを開いた時点でのヘッダーの高さが100pxだとします。

これをある程度スクロールしたら60pxに低くして少し目立たないようにしたい場合があります。

今回はファーストビューを超えるまでは変化なしで、超えたら以下のように変化させてみたいと思います。

  • 高さを低くする
  • 背景色を変更(白 → 水色)
  • 背景色の透過率を変更(少し濃くする)

今だけ!5大無料特典あり🎁

コーディングの時給アップにはこちら!


特定の位置までスクロールしたら固定ヘッダーの色やサイズを変更する方法

まずはサンプルを見てみましょう(スクロールして下さい)

See the Pen
特定の位置までスクロールしたらヘッダーの色やサイズを変更
by junpei (@junpei-sugiyama)
on CodePen.

ファーストビューを過ぎるとヘッダーの色やサイズが変わりました。

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

参考記事
【初心者向け】jQueryとは?CDNを使った本体の読み込み方についても分かりやすく解説
【初心者向け】jQueryとは?CDNを使った本体の読み込み方についても分かりやすく解説

続きを見る

 

コード解説

HTMLはこちらになります。

<header class="header js-header">
  <nav>
    <ul>
      <li>メニュー1</li>
      <li>メニュー2</li>
      <li>メニュー3</li>
    </ul>
  </nav>
</header>
<div class="mv js-mv">
  <img
    src="画像パス"
    alt=""
  />
</div>
<section class="content">
  <p>
    テキストが入ります。
  </p>
  <p>
    テキストが入ります。
  </p>
  <p>
    テキストが入ります。
  </p>
</section>

特に変わったところはありませんが、jQuery用のclassを付けています(『js-』というclass)

CSSはこちらです(重要なものだけ)

.header {
  background-color: rgba(255,255,255,.6);
  display: flex;
  justify-content: center;
  padding: 40px 0;
  position: fixed;
  transition: padding .5s, background-color .5s; /* 背景色と高さをじんわり変更 */
  width: 100%;
}
/* ファーストビューを過ぎたあとのヘッダー */
.header.transform {
  background-color: rgba(204,255,255,.9); /* 背景色変更 */
  padding: 20px 0; /* 高さ変更 */
}

.header.transformがスクロールしてファーストビューを過ぎたあとのスタイルになります。

ヘッダーの背景色、透過率、高さはbackground-color:paddingで変更しています。

そしてjQueryはこちらです。

$(function () {
  // スクロールを開始したら
  $(window).on("scroll", function () {
    // ファーストビューの高さを取得
    mvHeight = $(".js-mv").height();
    if ($(window).scrollTop() > mvHeight) {
      // スクロールの位置がファーストビューより下の場合にclassを付与
      $(".js-header").addClass("transform");
    } else {
      // スクロールの位置がファーストビューより上の場合にclassを外す
      $(".js-header").removeClass("transform");
    }
  });
});

4行目と5行目でファーストビューの高さを取得して、スクロールの位置がファーストビューより上か下かでclassの付け外しをしています。

そのclassのありなしでヘッダーのスタイルを変更しています。


スクロールを開始したらヘッダーの色やサイズを変更

先ほどは『ファーストビューを過ぎたら』でしたが、スクロール開始直後に変更することも可能です。

その方法はこちらの記事を参考に実装してみます。

参考記事
【jQuery】スクロール開始でイベントを発火させる方法
【jQuery】スクロール開始でイベントを発火させる方法

続きを見る

こちらがサンプルになります。

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

 

コード解説

HTMLとCSSは先ほどと同じです。

そしてjQueryはこちらになります。

$(function () {
  // スクロールを開始したら
  $(window).on("scroll", function () {
    if ($(this).scrollTop() > 0) {
      // ページトップ以外の場合classを付与
      $(".js-header").addClass("transform");
    } else {
      // ページトップの場合classを外す
      $(".js-header").removeClass("transform");
    }
  });
});

『スクロール開始したら』というのは『ページトップ以外』と同じ意味になります。

そしてページトップに戻ればヘッダーも元に戻ります。

以上になります。

あわせて読む
CSSだけで途中から固定するスティッキーヘッダーを作る方法【サンプル付きで解説】
CSSだけで途中から固定するスティッキーヘッダーを作る方法【サンプル付きで解説】

続きを見る

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
レビューは390件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ!5大無料特典あり🎁

販売ページとレビューを見てみる


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月間最高8.4万PV▶︎Twitterのフォロワーは6100人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計700部&420万円突破

-Web制作, jQuery