当我向下滚动页面时，我试图改变headerheight，但是由于这样或那样的原因，它不起作用。我已经试过把console.log放在上面，检查它是否起作用。

window.onload = () => {
  const header = document.querySelector("header");

  window.addEventListener("scroll", () => {
    if (window.scrollY > 50) {
      console.log("heeeeeeeey");
      header.style.height = "50px";
    } else {
      header.style.height = "12vh";
    }
  });
};

header {
  display: flex;
  background-color: var(--color3);
  flex-direction: row;
  padding: 0px 120px;
  min-height: 12vh;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0 auto;
  position: fixed;
  font-family: var(--titleFont);
  top: 0;
  z-index: 10;
}

<header>
  <div>
    <a>name</a>
  </div>
  <ul>
    <li><a href="#bio">Bio</a></li>
    <li><a href="#portfolio">Portfolio</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</header>