Creé una barra de navegación en la parte superior de mi página, y cuando el usuario se desplaza, la barra de navegación también se adhiere a la parte superior de la página. La función funciona muy bien en la web, pero tengo errores con los dispositivos móviles. Cuando me desplazo en el dispositivo móvil, la barra de navegación se corta a la mitad y solo puedo ver todo cuando me desplazo brevemente hacia arriba en la pantalla. ¿Alguien sabe por qué pasa esto?

 <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'); } };