javascript - 在响应模式下打开导航菜单时如何停止背景滚动

Question

我正在制作一个网站，但面临响应模式的问题。当我在移动显示中打开导航菜单时，如果我滑动它，它会在后台滚动。我试过使用position: fixed，overflow: hidden但效果不好。在我关闭导航栏时固定位置，它滚动到页面顶部。在溢出：隐藏它甚至不起作用。

我想让导航栏在页面顶部时看起来像这样：页面 顶部的导航栏
当页面滚动时，导航栏应该更改为： 滚动时导航栏

但是我无法在没有响应模式下出错的情况下实现它。

这是我的代码：

const docHeader = document.querySelector('header')
const hamburger = document.querySelector('.hamburger')
const hamburgerSpan = document.querySelector('.hamburger span')
const navMenu = document.querySelector('.nav-menu')
const navLogo = document.querySelector('nav .logo')
const body = document.querySelector('body')

hamburger.addEventListener('click', () => {
  //Hamburger Icon Toggle
  navMenu.classList.toggle('open')

  if (hamburgerSpan.innerHTML === 'menu') {
    hamburgerSpan.innerHTML = 'close'
  } else {
    hamburgerSpan.innerHTML = 'menu'
  }
})
const mediaQuery = window.matchMedia('(min-width: 768px)')

// when navigation bar scrolls it adds background and changes the nav-ul location
document.addEventListener('scroll', () => {
  docHeader.style.boxShadow = '0 1rem 1rem rgba(0, 0, 0, 0.05)'
  docHeader.style.backgroundColor = '#fff'
  navLogo.style.clientWidth = '20rem !important'

  if (mediaQuery.matches) {
    navMenu.style.margin = '0'
  }
  if (window.pageYOffset < 50) {
    docHeader.style.boxShadow = ''
    docHeader.style.backgroundColor = ''
    if (mediaQuery.matches) {
      navMenu.style.margin = '4.5rem auto 2rem 0'
    }
  }
})

/* When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */
let prevScrollpos = window.pageYOffset
window.onscroll = function() {
  let currentScrollPos = window.pageYOffset
  if (prevScrollpos > currentScrollPos) {
    docHeader.style.top = '0'
  } else {
    docHeader.style.top = '-8rem'
  }
  prevScrollpos = currentScrollPos
}

.container {
  max-width: 500px;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 992px;
  }
}

@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
}


/* header */

header {
  position: fixed;
  width: 100%;
  margin: 0 auto;
  transition: 600ms;
  z-index: 20;
}

.hamburger {
  z-index: 10;
}

.logo {
  width: 8rem;
  z-index: 10;
}

.nav-menu {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-250vw);
  background-color: #fff;
  padding: 10rem 0;
  height: 100vh;
  transition: 800ms;
  margin: 0 auto;
  display: grid;
  place-content: center;
}

.open {
  transform: translate(0) !important;
}

.nav-menu ul {
  list-style: none;
  line-height: 2rem;
  text-align: center;
}

.nav-menu a {
  color: #1c1b1b;
  text-decoration: none;
  font-family: 'Oswald';
  text-transform: uppercase;
  letter-spacing: 1px;
}

.nav-menu li a,
.nav-menu li a:after,
.nav-menu li a:before {
  transition: all 0.5s;
}

.nav-menu li a:hover {
  color: #555;
}


/* stroke */

.nav-menu ul li a,
.nav-menu ul li a {
  position: relative;
}

.nav-menu li a:after,
.nav-menu li a:after {
  position: absolute;
  bottom: -0.5rem;
  left: 0;
  right: 0;
  margin: auto;
  width: 0%;
  content: '.';
  color: transparent;
  background-color: #1c1b1b;
  height: 2px;
}


/* .nav-menu li a:hover:after {
    width: 100%;
} */

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (min-width: 768px) {
  .hamburger {
    display: none;
  }
  .nav-menu {
    position: static;
    transform: translateX(0);
    background-color: transparent;
    padding: 0;
    height: inherit;
    transition: 800ms;
    margin: 4.5rem auto 2rem 0;
    margin-left: 2rem;
    display: block;
  }
  .nav-menu ul {
    display: flex;
    gap: 1rem;
  }
}

<header>
  <div class="container">
    <nav>
      <div class="logo">
        <a href="#"><img src="assets/images/logo-black.png" class="img-fluid" alt="Logo"></a>
      </div>
      <div class="hamburger">
        <span class="material-icons-outlined md-36">menu</span>
      </div>
      <div class="nav-menu">
        <ul class="nav-menu-ul">
          <li><a href="#">Home</a></li>
          <li><a href="#about">About Us</a></li>
          <li><a href="#mission">Our Mission</a></li>
          <li><a href="#staff">Our Staff</a></li>
          <li><a href="#contact">Contact Us</a></li>
        </ul>
      </div>
    </nav>
  </div>
</header>