ヘッダーの一部をバックスクロールで表示したい

実現したいこと

ヘッダーの中にロゴとクリックするとメニューが開くボタンを配置しています。
下にスクロールするとc-headerがふわっと消える＋headerが見えない状態時にバックスクロールするとc-header-menu-btnだけが見えるようにしたいのですがうまくいきません。
教えていただけないでしょうか。よろしくお願いします。

<header class="c-header" id="c-header"> <div class="c-header-menu-btn"> <div class="c-header-menu-btn-img"> <img src="img/menu.svg" class="c-header-menu-btn-img-hidden" alt="" /> </div> </div> <div class="c-header-logo"> <h1> <img src="img/logo.svg" alt="" /> </h1> </div> </header> <style> .c-header { position: fixed; border: none; top: 0; left: 0; display: flex; justify-content: space-between; background-color: transparent; z-index: 2; width: 100vw; box-sizing: border-box; font-size: calc(100vw * 15 / 1440); } .header-logo-transparent { opacity: 0; } .active.header-logo-transparent { display: none; } </style>

/* スクロールするとヘッダーのロゴがふわっと消える */ $(document).ready(function () { var headerLogo = $(".c-header"); // ロゴを表す要素 var triggerDistance = 50; // ロゴを非表示にするスクロール距離 $(window).scroll(function () { var scroll = $(this).scrollTop(); // スクロール量を取得 // スクロール位置が triggerDistance を超えたら透明にする if (scroll > triggerDistance) { headerLogo.addClass("header-logo-transparent"); // transparent クラスを適用して透明にする } else { headerLogo.removeClass("header-logo-transparent"); // transparent クラスを削除して元に戻す } }); // ページのロード時にもスクロール位置を確認してクラスを追加する var initialScroll = $(window).scrollTop(); if (initialScroll > triggerDistance) { headerLogo.addClass("header-logo-transparent"); } }); var didScroll; var lastScrollTop = 0; var delta = 40; // バックスクロールとみなすスクロール量 $(window).on("scroll", function () { didScroll = true; }); setInterval(function () { if (didScroll) { hasScrolled(); didScroll = false; } }, 200); function hasScrolled() { var st = $(this).scrollTop(); if (Math.abs(lastScrollTop - st) <= delta) return; if (st > lastScrollTop) { // 下にスクロールしている場合、ヘッダーメニューを表示 $(".c-header-menu-btn").addClass("active"); $(".c-header-menu-btn-img").addClass("hidden"); } else { // 上にスクロールしている場合、ヘッダーメニューを非表示 $(".c-header-menu-btn").removeClass("active"); $(".c-header-menu-btn-img").removeClass("hidden"); } lastScrollTop = st; }