Sticky is causing others divs to glitch

I created a navbar with a submenu. The navbar has an image as a logo. Used Javascript to create sticky. The problem is, when I open the submenu when sticky is active, the logo(image) is glitching. I'm not facing this problem if the logo is pure text. I tried for hours to figure out the problem. Wrapped the entire navbar in multiple combinations of divs but couldn't solve the issue. Further, the glitch occurs at random times- which is freaking me out more. I'm attaching part of my code here. Can anyone tell me what is causing the error

  function isInViewport(element) {
    const rect = element.getBoundingClientRect();
    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
  }

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

function scrollDetect() {
  var lastScroll = 0;
  window.onscroll = function() {
    let currentScroll = document.documentElement.scrollTop || document.body.scrollTop; // Get Current Scroll Value

    if (currentScroll > 0 && lastScroll <= currentScroll) {
      lastScroll = currentScroll;
      navbar.classList.remove("sticky");
      navbar.classList.remove("z-index-999999");
    } else {
      lastScroll = currentScroll;
      navbar.classList.add("sticky");
      navbar.classList.add("z-index-999999");
    }

    if (currentScroll < 100) {
      navbar.classList.remove("sticky");
      navbar.classList.remove("z-index-999999");
    }

  };
}

scrollDetect();

.main-navbar {
  position: absolute;
  display: inline-flex;
  background-color: white;
  top: 3.7rem;
  width: 100%;
  height: 4.5rem;
}


/*Code for Sticky*/

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  transition: 0.3s height ease-in-out;
  -webkit-transition: 0.3s height ease-in-out;
  -moz-transition: 0.3s height ease-in-out;
  -ms-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  animation: faceInEffect 0.3s;
  -webkit-animation: faceInEffect 0.3s;
}

.logo img {
  position: relative;
  margin-right: 11.1rem;
  left: 9%;
  margin-top: -3px;
  width: 330px;
}

.nav-list {
  font-size: 1rem;
  display: flex;
  width: 30%;
  margin-top: .7rem;
  margin-left: 2.7rem;
}

.nav-list li {
  position: relative;
}

.nav-list>li>a {
  color: black;
  display: block;
  font-size: 1.05rem;
  font-weight: 500;
  padding: 1.3rem 1rem;
}

.sub-menu {
  display: flex;
  position: absolute;
  box-sizing: border-box;
  background-color: white;
  visibility: hidden;
  top: 3.8rem;
  left: -34.4rem;
  width: 89.89rem;
  height: 35rem;
  z-index: 100;
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
}

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

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

.z-index-999999{
z-index: 999999999;
}

<div class="main-navbar" id="navbar">
  <div class="logo">
    <a><img src="https://static.nike.com/a/images/q_auto:eco/t_product_v1/f_auto/dpr_2.0/w_441,c_limit/9d1635ed-eed0-45b0-b34d-e00468e2f79e/tanjun-easyon-shoes-mplG1H.png" alt=""></a>
  </div>
  <nav>
    <ul class="nav-list">
      <li class="dropdown-item-1">
        <a href="">Men</a>
        <ul class="sub-menu">
          <li><a href="#">shirts</a> </li>
          <ul>
      </li>
      <ul>
  </nav>
</div>

from Sticky is causing others divs to glitch