Sticky Header Problem on Mobile

.sticky-mobile {
    display: block;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
    background: inherit;
}

.sticky-mobile-navigation {
    position: fixed;
    overflow: auto;
    height: 100%;
    width: 100%;
}

<script>
let navbar = document.querySelector(".mobile-header-holder");
let mobnav = document.querySelector("ul#mobile-navigation");

if (navbar && mobnav) {

  function stickymobile() {
    let topoffset = navbar.offsetTop;

    if (window.pageYOffset > topoffset) {
      navbar.classList.add("sticky-mobile");
      mobnav.classList.add("sticky-mobile-navigation");
      mobnav.style.top = navbar.offsetHeight + 'px';

    } else {
      navbar.classList.remove("sticky-mobile");
      mobnav.classList.remove("sticky-mobile-navigation");
      mobnav.removeAttribute("style");
    }
  }
  document.addEventListener('scroll', () => {
    stickymobile();
  });
  document.addEventListener('touchmove', () => {
    stickymobile();
  });
}
</script>