Фиксация меню при скролле

<div class="header-nav" id="header-nav">
  <nav class="nav">
    <a href="#" class="logo">
      Logo
    </a>
    <ul class="nav-menu">
      <li>
        <a href="#" class="nav-link">
          Home
        </a>
      </li>
      <li>
        <a href="#" class="nav-link">
          About
        </a>
      </li>
      <li>
        <a href="#" class="nav-link">
          Catalog
        </a>
      </li>
      <li>
        <a href="#" class="nav-link">
          Contact
        </a>
      </li>
    </ul>
  </nav>
</div>

<header class="header">
</header>
<section class="content">
</section>

window.addEventListener('scroll', function()
  {
    let headerNav = document.getElementById('header-nav');
    headerNav.classList.toggle('headernav-scroll', window.scrollY > 100);
  });
  

fix-menu.rar