title: Responsive navigation menu in JavaScript
body: <p>I am trying to build a responsive navigation menu for my website. However, it should also stick to the top when you scroll further down the page. This works fine on the normal 'desktop-size' menu, but when I expand the list items in the responsive navigation menu, the whole menu re-positions itself back to the top.</p>
  
  <pre><code>let navbar = document.querySelector("nav");
  let offset = navbar.offsetTop;
  
  // Makes the menu sticky
  function stick() {
      if (window.pageYOffset &gt;= offset) {
          navbar.classList.add("sticky")
      } else {
          navbar.classList.remove("sticky");
      }
  }
  
  // Makes the menu responsive
  function collapse() {
      if (navbar.className === "responsive") {
          navbar.classList.remove("responsive");
      } else {
          navbar.classList.add("responsive")
      }
  }
  </code></pre>
  
  <p>My JSFiddle: <a href="https://jsfiddle.net/MihkelPajunen/t37g6hsc/" rel="nofollow noreferrer">https://jsfiddle.net/MihkelPajunen/t37g6hsc/</a></p>
  
  <p><strong>Question:</strong> Is there a way to make the responsive navigation menu sticky, so that the menu is accessible at the top of the page, even when you scroll further down the page?</p>