I have created a nav bar at the top of my page, and when the user scrolls the nav bar also sticks to the top of the page. The function works great on the web, but am running into errors with mobile devices. When I scroll on mobile, the nav bar gets cut in half and I can only see the entire thing when I scroll back up on the screen briefly. Does anyone know why this is happening?

    <nav class="nav">
        <h6 id="site">website.net</h6>
        <ul class="nav__links">
            <li class="nav__item">
                <a href="#section--about" class="link">About</a>
            </li>
            <li class="nav__item">
                <a href="#section--experience" class="link">Experience</a>
            </li>
            <li class="nav__item">
                <a href="#section--skills" class="link">Skills</a>
            </li>
            <li class="nav__item">
              <a href="#project__section--first" class="link">Projects</a>
            </li>
        </ul>
    </nav>


.nav {
    width: 100vw;
    padding: 2.5rem 2rem;
    background-color: #eee;
    z-index: 4;
  
    display: flex;
    justify-content: space-between;
}

.nav.sticky {
    position: fixed;
    background-color: #eee;
    z-index: 200;
}

const nav = document.querySelector('.nav');
// helper function for window.onscroll
const addHamburgerMenu = function () {
    nav.classList.add('sticky');
}
    


// sticky nav code functionality
window.onscroll = function () {
    if (window.pageYOffset >= nav.offsetTop) {
      addHamburgerMenu();
    } else if (window.pageYOffset <= nav.offsetTop){
      addHamburgerMenu();
    } else {
      nav.classList.remove('sticky');
    }
};