最初のセクションを過ぎたら上に消えて上にスクロールすると表示されるヘッダーの作り方

<header class="header">
  <nav class="header-nav">
    <ul class="header-list">
      <li class="header-item"><a href="#anchor01">HOME</a></li>
      <li class="header-item"><a href="#anchor02">ABOUT</a></li>
      <li class="header-item"><a href="#anchor03">SHOP</a></li>
      <li class="header-item"><a href="#anchor04">NEWS</a></li>
    </ul>
  </nav>
</header>
<!-- メインコンテンツ -->
<main>
  <section class="section01" id="anchor01">
    <h2 class="section-title">HOME</h2>
  </section>
  〜中略〜
</main>

/* スムーズスクロールとヘッダーのスタイル */
html {
  scroll-behavior: smooth; /* スムーズスクロールを有効化 */
}
/* ヘッダー部分のスタイル */
.header {
  background-color: #ff9393; /* 背景色 */
  color: #fff; /* テキスト色 */
  position: fixed; /* 固定 */
  top: 0; /* 上からの位置 */
  transition: top .5s; /* アニメーション効果を追加 */
  width: 100%; /* 幅を100%に */
}
/* ヘッダーリストのスタイル */
.header-list {
  align-items: center; /* 垂直方向中央揃え */
  display: flex; /* 横並びに配置 */
  height: 70px; /* ヘッダーの高さ */
  justify-content: center; /* 左右中央寄せ */
}
/* ヘッダーアイテムのスタイル */
.header-item a {
  color: #fff; /* テキスト色 */
  padding: 10px; /* 内側の余白 */
  text-decoration: none; /* デフォルトの下線を消す */
}

/* ヘッダー部分のスタイル */
.header {
  position: fixed; /* 固定 */
  top: 0; /* 上からの位置 */
  transition: top .5s; /* アニメーション効果を追加 */
}

$(document).ready(function () {
  // ウィンドウのスクロール量を保持する変数
  let start_position = 0,
    window_position;
  // ヘッダー要素を取得
  const header = $("header");
  // 最初のsection要素の高さを取得
  const firstSectionHeight = $("section").outerHeight();
  // スクロールイベントを設定
  $(window).scroll(function () {
    // 現在のウィンドウのスクロール量を取得
    window_position = $(window).scrollTop();
    // ヘッダーの高さを取得
    const headerHeight = header.outerHeight();
    // 最初のsection要素を過ぎるまではヘッダーを表示
    if (window_position <= firstSectionHeight) {
      header.css("top", "0");
    } else {
      // 最初のsection要素を過ぎたらヘッダーを上に移動
      header.css("top", -headerHeight + "px");
    }
    // 現在の位置を更新
    start_position = window_position;
  });
  // ページ読み込み時に中途半端な位置でロードされたときでも正しくヘッダーの表示を設定するためにスクロールイベントを発生させる
  $(window).trigger("scroll");
});

// ウィンドウのスクロール量を保持する変数
let start_position = 0;
let window_position;
// ヘッダー要素を取得
const header = document.querySelector("header");
// 最初のsection要素の高さを取得
const firstSection = document.querySelector("section");
const firstSectionHeight = firstSection ? firstSection.offsetHeight : 0;
// スクロールイベントを設定
window.addEventListener("scroll", function () {
  // 現在のウィンドウのスクロール量を取得
  window_position = window.scrollY;
  // ヘッダーの高さを取得
  const headerHeight = header.offsetHeight;
  // 最初のsection要素を過ぎるまではヘッダーを表示
  if (window_position <= firstSectionHeight) {
    header.style.top = "0";
  } else {
    // 最初のsection要素を過ぎたらヘッダーを上に移動
    header.style.top = -headerHeight + "px";
  }
  // 現在の位置を更新
  start_position = window_position;
});
// ページ読み込み時に中途半端な位置でロードされたときでも正しくヘッダーの表示を設定するためにスクロールイベントを発生させる
window.dispatchEvent(new Event("scroll"));