Estoy tratando de crear un encabezado fijo con altura variable. Me explicaré, supongamos que ingresa al sitio y el encabezado está visible, y tiene 40 px de altura. una vez que se desplaza hacia abajo, el encabezado ahora es de 30 px, y está arreglado. ¿Cómo puedo conseguir esto? Sé que se supone que debo escribir algo de código, pero no tengo idea de por dónde empezar. Sé cómo hacer un encabezado fijo pero no sé cómo implementar la función de altura variable. Cualquier consejo o fragmentos de código son bienvenidos.
Creo que este código puede ayudarte.
window.onscroll = function() { var header = document.getElementsByTagName('header') if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) { header[0].classList.add('header-scroll'); } else { if (header[0].classList.contains("header-scroll")) { header[0].classList.remove('header-scroll'); } } } .container { height: 200vh; padding-top: 40px; } header { position: fixed; top: 0; left: 0; right: 0; background-color: green; box-shadow: 0 0 5px rgba(0, 0, 0, .3); height: 40px; transition: all .3s ease; } .header-scroll { height: 30px; } <div class="container"> <header> </header> <p>Scroll me</p> </div>Puedes hacerlo con CSS puro anidando position: sticky; elementos y dar a la barra de navegación como posición top: -10px
<nav> a la altura fija de 40pxnav { position: sticky; top: -10px; } . Eso permitirá que la barra de navegación se desplace 10 px fuera de la ventana gráfica, dejando visible su altura a 30 px.display: sticky; lo. Ahora usa top: 0; para evitar que esos elementos salgan de la ventana gráfica. nav { position: sticky; top: -10px; height: 40px; background-color: red; } nav > div { position: sticky; top: 0; } /* for scrolling purpose only */ body { min-height: 500vh; margin: 0; } /* if you want the text vertically centered */ nav { display: flex; align-items: center; } nav > div { display: flex; align-items: center; height: 30px; } <nav> <div>Test</div> </nav>