jQuery Web制作

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

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

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

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

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

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

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

 

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

1,100部突破🎉

商品ページはこちら!

2024年4月15日値上げ!

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

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

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だけで途中から固定するスティッキーヘッダーを作る方法【サンプル付きで解説】

続きを見る

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

-jQuery, Web制作