navbar with sticky glitches when submenu opens

Issue

I have created a navbar with sticky using HTML, CSS, and JavaScript. A submenu is opened when hovered over the nav-list elements. I have included the code for all below. The problem I am facing is, that if sticky is active and I open my submenu, it causes a glitch for a macro-second with the height of my navbar. Further, the frequency of the glitch is arbitrary. I have attached an image of my glitch. What is causing this and how can I stop it?

function scrollDetect() {
  const navbar = document.getElementById("navbar");
  let lastScroll = 0;

  window.addEventListener("scroll", () => {
    const currentScroll = document.documentElement.scrollTop || document.body.scrollTop;

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

    lastScroll = currentScroll;

    if (currentScroll < 100) {
      navbar.classList.remove("sticky");
    }
  });
}

scrollDetect();

  .main-navbar {
  position: absolute;
  display: flex;
  background-color: rgb(255, 255, 255);
  width: 100%;
  top: 3.7rem;
  height: 4.5rem;
  align-items: center;
  justify-content: space-between;
}

.nav-list {
  display: flex;
  margin-left: 5.3rem;
  align-items: center;
  margin-top: 1rem;
}

.nav-list a {
  position: relative;
}

.nav-list>li>a {
  font-size: 1.07rem;
  font-weight: 500;
  padding: 10px 15px 2rem 15px;
}

.nav-list>li>a::after {
  content: "";
  position: absolute;
  background-color: rgb(0, 0, 0);
  height: 3.9px;
  width: 0;
  left: 0;
  bottom: 14px;
  border-radius: 2px;
}

.sub-menu {
  position: absolute;
  background-color: rgb(255, 255, 255);
  visibility: hidden;
  margin-top: 1.1rem;
  left: 0;
  width: 100%;
  z-index: 100;
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
}

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

.sub-menu a {
  position: relative;
  color: black;
  font-size: 1rem;
  font-weight: 200;
  padding: 3rem 40px 0 40px;
  display: block;
  width: 100%;
}

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

.nav-list>li:hover>a::after {
  width: 100%;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  animation: faceInEffect 0.3s;
  -webkit-animation: faceInEffect 0.3s;
  border-bottom: none;
}

@keyframes faceInEffect {
  from {
    top: -5rem;
  }
  to {
    top: 0rem;
  }
}

.logo a svg {
  margin-left: 12%;
  width: 300px;
  transition: width 0.2s ease;
}

.logo a svg:hover {
  opacity: 0.7;
}

.rightnav {
  position: relative;
  right: 2.9%;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.content {
  position: relative;
  top: 100rem;

<div class="main-navbar" id="navbar">
  <div class="logo">
    <a href="">
      <svg>
            
          </svg>
    </a>
  </div>
  <div>
    <nav>
      <ul class="nav-list">
        <li>
          <a href="">NEW</a>
        </li>
        <li class="nav-item" data-menu="submenu1">
          <a href="">Men</a>
          <ul class="sub-menu" id="submenu1">
            <li><a href="">shirts</a> </li>
            <li><a href="#">Shorts</a></li>
          </ul>
        </li>
        <li class="nav-item" data-menu="submenu2">
          <a href="">Women</a>
          <ul class="sub-menu" id="submenu2">
            <li><a href="#">shirts</a> </li>
            <li><a href="#">Shorts</a></li>
            <li><a href="#">Accessories</a></li>
          </ul>
        </li>
      </ul>
    </nav>
  </div>
  <div class="rightnav">
    <div class="search-bar">
      <form>
        <div class="clickclass">
          <input class=" search bt-outline" type="text" placeholder="Search">
          <button class="bt-outline" id="clear-button">Clear</button>
          <a class="search-button" type="submit">
          </a>
        </div>
      </form>
    </div>
  </div>
</div>


<div class="content">
  hello
</div>

Solution

You need to add this rule in your CSS, so that your submenus are under hovered nav-item.

.nav-item {
   position: relative;
}

After this I tried your code and the issue is not happening.

Answered By - Hemant