window.onscroll= function() {myFunction()}; var navbar = document.getElementById("navbar"); var sticky = navbar.offsetTop; function myFunction() { if (window.pageYOffset >= sticky) { navbar.classList.add("sticky") } else { navbar.classList.remove("sticky"); } } <header id="home"> <nav id="navbar"> <div class="row flex"> <a href="#"><img src="img/logo.png" class="logo" alt="logo"></a> <ul> <li><a href="#home" class="active">home</a></li> <li><a href="#service">service</a></li> <li><a href="#team">team</a></li> <li><a href="#skill">skill</a></li> <li><a href="#portfolio">portfolio</a></li> <li><a href="#review">review</a></li> <li><a href="#contact">contact</a></li> </ul> </div> </nav> <div class="row"> <div class="hero-text-box"> <h1>Hi there! We are the new kids on the block and we build awesome websites and mobile apps.</h1> <a href="#" class="btn btn-hero">work with us!</a> </div> </div> </header>Tendrás que especificar en qué posición quieres pegar esa barra. Posición: Sticky funciona con alguna posición en la que desea pegar esa barra de navegación. Por ejemplo:
position: sticky; top: 3rem;cambia tu css de:
.sticky { position: fixed; top: 0; }a
.sticky { position: sticky; top: 0; }Consulte este enlace: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_sticky_element
Intente proporcionar la parte superior donde desea pegar la barra mientras se desplaza. intente con el siguiente código:
<!DOCTYPE HTML> <html> <style> .sticky{ position: sticky; top: 0; } </style> <header id="home1"> <nav id="navbar" class="sticky"> <div class="row flex"> <a href="#"><img src="img/logo.png" class="logo" alt="logo"></a> <ul> <li><a href="#home" class="active">home</a></li> <li><a href="#service">service</a></li> <li><a href="#team">team</a></li> <li><a href="#skill">skill</a></li> <li><a href="#portfolio">portfolio</a></li> <li><a href="#review">review</a></li> <li><a href="#contact">contact</a></li> </ul> </div> </nav> <div class="row"> <div class="hero-text-box"> <h1>Hi there! We are the new kids on the block and we build awesome websites and mobile apps.</h1> <a href="#" class="btn btn-hero">work with us!</a> </div> </div> </header> </html>