Sub-menu moving moving when using sticky

/*for Sticky*/

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky+.sub-menu {
  padding-top: 0px;
}


/*style for nav bar*/

nav {
  display: inline-flex;
  width: 100%;
}

.nav-list {
  display: flex;
  width: 100%;
  margin-top: .7rem;
  padding-left: 1.1rem;
}

.nav-list li {
  position: relative;
}

.nav-list>li>a {
  color: black;
  display: block;
  font-size: 1rem;
  padding: 1.3rem 1rem;
  text-transform: uppercase;
}

.sub-menu {
  display: flex;
  position: fixed;
  box-sizing: border-box;
  background-color: black;
  visibility: hidden;
  top: 4.5rem;
  /*adjust postion */
  left: -3rem;
  width: 82.5rem;
  height: 35rem;
}

.sub-menu a {
  position: relative;
  top: 2rem;
  color: white;
  font-size: 1.1rem;
  font-weight: 200;
  padding: 3rem 40px 0 40px;
}

.sub-menu a:hover {
  color: #7e7978;
}

.nav-list li:hover>.sub-menu {
  visibility: visible;
}

<div class="main" id="navbar">
  <div class="logo">
    <a href="">XZY</br> NAME</a>
  </div>
  <nav>
    <ul class="nav-list">
      <li>
        <a href="">Category</a>
        <ul class="sub-menu">
          <li><a href="#">shirts</a> </li>
        </ul>
      </li>
      <ul>
  </nav>
</div>


<div class="content for scroll">
  <a>Enim sociosqu class viverra pellentesque consectetuer a hymenaeos lectus lacinia potenti suscipit sagittis velit. Primis habitant sociis. Mauris nonummy Donec, habitasse vitae ullamcorper aptent velit ligula. Natoque placerat class nunc, natoque iaculis non ac iaculis. Turpis nullam. Suscipit curae; nisl mi eleifend venenatis est phasellus luctus sociosqu facilisis egestas. Porta suspendisse inceptos sociis placerat adipiscing auctor aliquam vel libero aptent. Duis class, sollicitudin, massa sodales, netus volutpat nibh lobortis bibendum est torquent ipsum volutpat pharetra ac eleifend consequat magna vitae tincidunt euismod eleifend lobortis dapibus vitae. Cras sollicitudin nullam per inceptos elementum dolor varius rutrum sollicitudin augue vestibulum ullamcorper donec pharetra feugiat aliquet etiam est turpis velit eros, eu arcu. Elementum interdum tincidunt. Dolor semper consectetuer morbi vivamus aliquam. Id class platea pharetra nec varius tristique dis metus. Fusce nascetur sociosqu ultricies leo mauris maecenas vulputate. Metus vulputate purus cum habitant, erat semper bibendum. Nisi per aliquam nec tellus turpis Curae;. Praesent ornare curae; vehicula mattis potenti vitae torquent montes lorem nam gravida eget sapien natoque risus per nulla quisque ornare ultrices erat morbi dignissim scelerisque dictumst porttitor leo. Aptent facilisis pharetra cras curae; aenean.

Tellus cursus auctor. Volutpat commodo id. Tempor nec natoque integer leo senectus suscipit. Aliquam quisque nulla litora vivamus hymenaeos praesent dui primis. Mollis praesent lobortis tincidunt parturient venenatis. Mattis. Lectus fermentum ornare ornare senectus interdum hac rhoncus sociis litora. Non in lacus egestas sociis. Consequat justo posuere dapibus ornare nulla sollicitudin nascetur donec hymenaeos. Pharetra aliquet imperdiet molestie nullam libero habitant ipsum pharetra quisque ad class natoque hymenaeos justo quisque. Class. Risus duis lacinia eleifend magna penatibus urna, posuere cras Massa quam est mi sapien nisl placerat. Libero fermentum pharetra taciti, auctor metus eleifend mus fermentum luctus felis. Odio condimentum. Pellentesque senectus hymenaeos eget nostra ac vitae. Aenean fusce faucibus dictum. Ornare natoque. Sem. Lobortis malesuada. Lacus ante donec turpis venenatis volutpat, amet condimentum urna pulvinar arcu vitae maecenas libero iaculis elementum senectus dapibus vulputate feugiat viverra pulvinar mattis purus hac rhoncus ridiculus egestas a senectus. Sollicitudin.

Enim, dictumst nullam platea molestie nonummy. Non, donec montes. Erat id. Eu erat commodo ornare potenti curabitur pharetra et curae; velit nec ullamcorper morbi nonummy hymenaeos, montes montes parturient fermentum per. Quis auctor nascetur class eu Venenatis. Pellentesque euismod cras imperdiet malesuada neque scelerisque mollis. Nec molestie pulvinar quis eget erat. Sapien vestibulum nullam metus nec placerat nisl ridiculus sociis suscipit consequat sed facilisis arcu senectus molestie facilisi interdum at vehicula tempor penatibus malesuada. Consectetuer eu adipiscing non. Curae; integer varius pede mi mus. Metus malesuada congue elit molestie orci urna sed ornare vel curabitur vulputate congue convallis felis maecenas adipiscing ac fermentum. Mus fringilla lacus. Non tortor rutrum dis habitasse mattis elementum eleifend. Arcu. Nascetur. Porttitor per, non porttitor. Potenti mi mi sapien nibh. Malesuada praesent per orci eu pulvinar dui ante mollis. Elit luctus sagittis tempus augue cras nunc interdum scelerisque sapien nec dapibus conubia est euismod aliquam arcu ligula porta metus curabitur eleifend sed. Ad sagittis ad. Nullam blandit maecenas dolor orci Quam pharetra duis. </a>
</div>

<script>
  window.onscroll = function() {
    myFunction()
  };

  var navbar = document.getElementById("navbar");
  var sticky = navbar.offsetTop;

  function myFunction() {
    if (window.pageYOffset >= sticky) {
      navbar.classList.add("sticky")
    } else {
      navbar.classList.remove("sticky");
    }
  }
</script>