SWELL 下にスクロールすると隠れるヘッダー [WordPress]

/* --------------------
ヘッダー開閉
-------------------- */
// ヘッダーを取得
const header = document.getElementById("header");
// ヘッダーの高さを取得
const hH = header.clientHeight;
// ウィンドウの高さを取得
const winH = window.innerHeight;
// ページの高さを取得
const docH = document.documentElement.scrollHeight;
// ウィンドウが最下部達した場合のウィンドウ上部の位置を取得
const windBtm = docH - winH;

// 現在地を示す変数を定義
let pos = 0;
// スクロール直前の位置を示す変数を定義
let lastPos = 0;

const onScroll = () => {
  if (pos > hH && pos > lastPos) {
    header.classList.add("header--hide");
  }
  // スクロール位置がヘッダーの高さ分より小さいか
  // またはスクロール位置が最後のスクロール位置より小さい場合はclass名を削除
  if (pos < hH || pos < lastPos || windBtm <= pos) {
    header.classList.remove("header--hide");
  }
  
  // スクロール停止で表示
  setTimeout(() => {
      header.classList.remove("header--hide");
  }, 500);

  // 最後のスクロール位置を保存
  lastPos = pos;
};

window.addEventListener("scroll", () => {
  // スクロールするごとにpos（現在地）の値を更新
  pos = window.scrollY;
  onScroll();
});

<script src="/wp-content/themes/swell_child/scripts.js"></script>

/*--------------------------------------
ヘッダー開閉
--------------------------------------*/
#header {
  position: sticky;
  transition: transform 0.4s ease;
}

.header--hide {
  transform: translateY(-150%);
}