jQuery Web制作

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

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

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

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

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

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

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

 

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

\ 完全無料 /

ZeroPlus Gate公式サイト

先着1日25名まで!

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

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

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制作