【スクロールでデザインが変わる】ヘッダーの作り方

<!-- ヘッダー -->
<header>
  <!-- ロゴ -->
  <a href="#" class="logo">Logo</a>
  <!-- ナビゲーション -->
  <ul>
 　　  <li><a href="#">会社案内</a></li>
    <li><a href="#">サービス</a></li>
    <li><a href="#">お問い合わせ</a></li>
  </ul>
</header>

<!-- スクロール用のsectionタグ -->
<section class="section section-a">
</section>

<!-- スクロール用のsectionタグ -->
<section class="section section-b">
</section>

header {
  /* headerを画面上部に固定する */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* ロゴとナビゲーションを横並びにする */
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* スクロールしても他のコンテンツの下にならないようにする */
  z-index: 10;
  /* 背景色を黒にする */
  background: #000;
  /* headerに余白を作る */
  padding: 25px 15px;
  /* アニメーションの変化時間 */
  transition: 0.5s;
}

/* ロゴのデザイン */
.logo {
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  letter-spacing: 1px;
  /* アニメーションの変化時間 */
  transition: 0.5s;
}

/* ナビゲーションのリンクを横並びにする */
ul {
  display: flex;
  justify-content: center;
  align-items: center;
}

li {
  list-style: none;
}

/* ナビゲーションのリンクのスタイル調整 */
a {
  display: inline-block;
  margin-left: 12px;
  color: #fff;
  font-size: 12px;
  text-decoration: none;
  letter-spacing: 1px;
  /* アニメーションの変化時間 */
  transition: 0.5s;
}

/* スクロールするため高さを出すためのsection */
.section {
  height: 100vh;
}

.section-a {
  background: #000;
}

.section-b {
  background: #fff;
}

/* スクロールして「scroll-navクラス」がついたときのヘッダーデザイン */
header.scroll-nav {
  /* 余白を狭くする */
  padding: 10px 15px;
  /* 背景を白にする */
  background: #fff;
  /* コンテンツの背景が白でもナビゲーションだと分かりやすいように影をつける */
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

/* 「scroll-navクラス」がヘッダーについたときに、ロゴとナビゲーションの文字を黒にする */
header.scroll-nav .logo,
header.scroll-nav ul li a {
  color: #000;
}

header {
  /* headerを画面上部に固定する */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

header {
  /* スクロールしても他のコンテンツの下にならないようにする */
  z-index: 10;
}

header {
  /* 背景色を黒にする */
  background: #000;
  /* headerに余白を作る */
  padding: 25px 15px;
}

/* ロゴのデザイン */
.logo {
  color: #fff;
}

/* ナビゲーションのリンクのスタイル調整 */
a {
  color: #fff;
}

/* スクロールして「scroll-navクラス」がついたときのヘッダーデザイン */
header.scroll-nav {
  /* 余白を狭くする */
  padding: 10px 15px;
  /* 背景を白にする */
  background: #fff;
  /* コンテンツの背景が白でもナビゲーションだと分かりやすいように影をつける */
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

/* 「scroll-navクラス」がヘッダーについたときに、ロゴとナビゲーションの文字を黒にする */
header.scroll-nav .logo,
header.scroll-nav ul li a {
  color: #000;
}

header {
  /* アニメーションの変化時間 */
  transition: 0.5s;
}

/* ロゴ */
.logo {
  /* アニメーションの変化時間 */
  transition: 0.5s;
}

/* ナビゲーションのリンク */
a {
  /* アニメーションの変化時間 */
  transition: 0.5s;
}

window.addEventListener("scroll", function () {
  // ヘッダーを変数の中に格納する
  const header = document.querySelector("header");
  // 100px以上スクロールしたらヘッダーに「scroll-nav」クラスをつける
  header.classList.toggle("scroll-nav", window.scrollY > 100);
});