.navigation { color: var(--var-color-two); font-family: "Kanit-medium", sans-serif; font-style: normal; font-size: 26px; height: 1500px; padding-top: 42px; padding-left: 250px; position: sticky; top: 0; } .logo { display: inline-block; font-size: 30px; } .nav-links { position: relative; display: inline-block; left: 12rem; } .nav-item { display: inline-block; margin: 0 18px; } <div id="header"> <div class="navigation"> <ul class="logo"> <li> <a class="home" href="index.html">HOME</a> </li> </ul> <ul class="nav-links"> <li class="nav-item"> <a class="ebay" href="Pages/Page1.html">Page1</a> </li> <li class="nav-item"> <a class="stock" href="Pages/Page2.html">Page2</a> </li> <li class="nav-item"> <a class="drop" href="Pages/Page3.html">Page3</a> </li> <li class="nav-item"> <a class="pricing" href="Pages/Page4.html">Page4</a> </li> </ul> </div> </div>He intentado hacer que .navigation sea pegajoso, fijo, etc. El encabezado no parece pegarse en la parte superior de la página cuando me desplazo hacia abajo. ¿Alguna idea de por qué no se pega en la parte superior de la página a pesar de que hice todo bien? No me importa agregar Java Script si es necesario. EDITAR: He intentado agregar sticky y top: 0; al #header también, no funciona.
La razón por la que no funciona es muy simple, necesitas aplicar el sticky al #header en la estructura que tienes, ¿por qué? la propiedad adhesiva depende del desbordamiento y la capacidad de desplazarse en el elemento principal, la propiedad adhesiva se vuelve adhesiva cuando se pasa la altura del elemento. aquí hay una página con una explicación más detallada https://www.designcise.com/web/tutorial/how-to-fix-issues-with-css-position-sticky-not-working
también una pequeña prueba. No puedo entrar en muchos detalles sobre la propiedad en este comentario, lea la página anterior.
body{ height: 800px; } #header { color: var(--var-color-two); font-family: "Kanit-medium", sans-serif; font-style: normal; font-size: 26px; width: 100%; height: auto; padding-top: 42px; padding-left: 250px; position: sticky; top: 0; background-color:red; display: flex; } .logo { display: inline-block; font-size: 30px; } .nav-links { position: relative; display: inline-block; left: 12rem; } .nav-item { display: inline-block; margin: 0 18px; } <div id="header"> <nav class="navigation"> <ul class="logo"> <li> <a class="home" href="index.html">HOME</a> </li> </ul> <ul class="nav-links"> <li class="nav-item"> <a class="ebay" href="Pages/Page1.html">Page1</a> </li> <li class="nav-item"> <a class="stock" href="Pages/Page2.html">Page2</a> </li> <li class="nav-item"> <a class="drop" href="Pages/Page3.html">Page3</a> </li> <li class="nav-item"> <a class="pricing" href="Pages/Page4.html">Page4</a> </li> </ul> </nav> </div>Por favor, eche un vistazo a la posición: propiedad Sticky CSS.
Esto también te ayudará:https://dev.to/akhilarjun/one-line-sticky-header-using-css-5gp3
¡Espero que mi respuesta te ayude!