スクロールでロゴとヘッダーが切り替わるヘッダーの作り方【サンプルコードあり】

今回はヘッダーのロゴを画面スクロールでメインビジュアルを過ぎたところで別のロゴに変更する方法を記事にしました。
デモコードも一緒に掲載しているので、ぜひ参考にしてみてください。

最初のページ表示では通常ロゴが表示。
スクロールが進み、今回はファーストビューの80%を過ぎた辺りからヘッダーが一瞬フェードアウト。
その後、100%通過後にロゴが変更されヘッダーが再び表示されます。

今回もレスポンシブは、自作のClamp計算ツールで算出した値をつかってます。

【CSS自作ツール】clamp()でpadding/marginもスマートに自動制御！リアルタイム計算＋コピー機能つき

clamp() はフォントサイズだけじゃないpadding や margin にも使えるので、今回その設定数値を計算して記入するためのコードを表示するツール作成してみた。padding や margin をclamp()で設定することで、 ...

【CSS初心者向け】font-size: clamp() 自動計算ツールを自作！リアルタイム計算＆コピー機能付き

今回は、レスポンシブ対応で font-size を柔軟に設定したいけど、clamp() の計算が面倒…スマホでもPCでもバランス良いフォントサイズを自動で調整されるように設定したい。そんなあなたのために、今回は HTML・CSS・JavaS...

HTMLのマークアップ
CSSでスタイルを調整
JavaScriptでロゴ・ヘッダーの制御
作成・運営におすすめのサーバー「エックスサーバー」
YouTube動画

HTMLのマークアップ

ヘッダー部分とトップのメインビジュアル、ロゴ画像を設置。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ヘッダー上から出現</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <header id="header" class="header-inner header"> 
    <div class="header-wrap">
      <h1 class="header-logo">
        <a href="/">
          <img id="initialLogo" src="img/inoprologo.png" alt="kmftロゴ">
          <img id="newLogo" class="js-hidden" src="img/kmftlogo.png" alt="いのプロロゴ">
        </a>
      </h1>
      <div class="header-nav">
        <ul class="nav-list">
          <li><a href="#" class="nav-item">ホーム</a></li>
          <li><a href="#" class="nav-item">サービス</a></li>
          <li><a href="#" class="nav-item">制作事例</a></li>
          <li><a href="#" class="nav-item">ニュース</a></li>
        </ul>
        <div class="header-btn">
          <a href="#" class="header-contact">
            お問い合わせ
          </a>
        </div>
      </div>

    </div>
  </header><!-- /.header-inner -->


  <section class="top-mv js-fvheight">
  <!-- <div class="top-image"> -->
    <div class="top-image">
    </div>
  </section>

  <main>
    <div>
      テスト文章 テスト文章 テスト文章 テスト文章 テスト文章 テスト文章 テスト文章 テスト文章 テスト文章 テスト文章<br> テスト文章 テスト文章 テスト文章 テスト文章 テスト文章 テスト文章 テスト文章 テスト文章 テスト文章 テスト文章 テスト文章 テスト文章 
    </div>
  </main>
  <script src="main.js"></script>
</body>
</html>

CSSでスタイルを調整

ヘッダー・ロゴ・ボタンなどのスタイルです。
今回はjs-hiddenでJavaScriptでクラスのをつけたり外したりして表示・非表示の制御をしてます。

.js-hidden は画像の非表示クラス。

.header.js-none はヘッダーのフェードアウト状態。

.nav-list a:hover はホバーで若干透過。

@charset "utf-8";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
  display: block;
}

.header {
  width: 100%;
  position: fixed;
  z-index: 1000;
  opacity: 1;
  transition: opacity 1s ease;
  background-color: rgba(255, 255, 255, .1);
}

.header.js-none {
  opacity: 0;
  transition: opacity .1s ease;
}

.js-hidden {
  display: none;
}

.header-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1920px;
  margin-inline: auto;
  /* padding: 1.5625vw 4.1666666667vw; */
  padding: clamp(15px, -0.0812vw + 21.23px, 20px) clamp(24px, -0.4222vw + 56.42px, 50px);
}

/* .header-logo {
  width: min(3rem, 60px);
} */

.header-logo #initialLogo {
  /* width: 100%; */
  width: min(3rem, 60px);
  height: 100%;
  object-fit: contain;
  vertical-align: bottom;
}

.header-logo #newLogo {
  /* width: 100%; */
width: min(5rem, 100px);
  /* height: 50px; */
   height: 100%;
  vertical-align: bottom;
  object-fit: cover;
}

.header-nav {
  display: flex;
  align-items: center;
  /* gap: 2.5rem; */
  gap: clamp(20px, 2.6596vw + -0.43px, 40px);
}

.nav-list {
  display: flex;
  align-items: center;
  /* gap: 2.5rem; */
  list-style: none;
  gap: clamp(20px, 2.6596vw + -0.43px, 40px);
}

.nav-list a {
  font-size: clamp(14px, 0.5319vw + 9.91px, 18px);
  color: #0d0d0d;
transition: .6s;
}
.nav-list a:hover {
  opacity: .5;
}

.header-contact,
a.header-contact {
font-size: clamp(14px, 0.5319vw + 9.91px, 18px);
font-weight: 700;
color: #fff;
background-color: rgb(247, 64, 64);
border-radius: 100vh;
padding: 10px clamp(20px, -0.0650vw + 24.99px, 24px);
transition: .6s;
}

.header-contact:hover,
a.header-contact:hover {
background-color: rgb(239, 121, 121);
color: #fff;
} 

.top-mv {
	width: 100%;
  height: 100vh;
}

.top-image{
	width: 100%;
  height: 100%;
  background-image: url(img/about-1.jpg);
	background-repeat: no-repeat;
	background-position: top;
	background-size: cover;
}

main {
  height: 2000px;
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
  padding-top: 200px;
}

JavaScriptでロゴ・ヘッダーの制御

次のJavaScriptコードで、スクロール量に応じて次の処理を行っています：

✅ 80%通過：ヘッダーがフェードアウト
✅ 100%通過：ヘッダー再表示・ロゴ変更

/* ===========================
header入替＆ロゴ入替
============================ */
document.addEventListener("DOMContentLoaded", function() {
  const windowElement = window;
  const header = document.querySelector('.header');
  const jsFvHeight = document.querySelector('.js-fvheight');
  const initialLogo = document.getElementById('initialLogo');
  const newLogo = document.getElementById('newLogo');

  let appliedSmallClass = false; // フラグを初期化

  function checkScroll() {
    const scrollTop = windowElement.scrollY;
    const fvOffsetTop = jsFvHeight.offsetTop;
    const fvHeight = jsFvHeight.offsetHeight;
  
    // 80%の高さの位置
    const eightyPercent = fvOffsetTop + (fvHeight * 0.8);
    // 100%の高さの位置
    const hundredPercent = fvOffsetTop + fvHeight;

    // ヘッダーの処理
    if (scrollTop >= eightyPercent && scrollTop < hundredPercent) {
      header.classList.add('js-none');
    } else {
      header.classList.remove('js-none');
    }

    if (scrollTop >= hundredPercent) {
      header.classList.remove('js-none');
    }

    if (scrollTop < eightyPercent) {
      header.classList.remove('js-none');
    }

    // 90%の位置で initialLogo と newLogo を切り替え
    if (scrollTop >= eightyPercent) {
      initialLogo.classList.add('js-hidden');
    } else {
      initialLogo.classList.remove('js-hidden');
    }

    // 100%の位置で initialLogo と newLogo を切り替え
    if (scrollTop >= hundredPercent) {
      newLogo.classList.remove('js-hidden');
    } else {
      newLogo.classList.add('js-hidden');
    }
  }

  // スクロールイベントに対して関数をバインド
  windowElement.addEventListener('scroll', checkScroll);
 
  // ページロード時に一度チェック
  checkScroll();
});