Estoy tratando de hacer un encabezado fijo. Agrego un valor superior de relleno al cuerpo igual a la altura del encabezado para evitar saltos (debido a que se pasa de la posición relativa a la fija). Pero dado que la altura del encabezado cambia después del punto de interrupción 992 debido al ícono de hamburguesa, necesito actualizar este valor de relleno en consecuencia. Pero no pude lograr hacerlo. No estoy seguro de dónde y cómo debo agregar el detector de eventos de cambio de tamaño. Tenga en cuenta que la altura del encabezado fijo también es diferente, pero no debería afectar este valor superior del relleno del cuerpo. Este es mi código hasta ahora: https://codepen.io/penplaycode/pen/YzEWJGB

Para comprender el problema, en el ejemplo de codepen, primero verifique la vista del escritorio, desplácese un poco hacia abajo, notará que el encabezado se fija en la parte superior después de desplazarse 100 px, sin saltos, todo funciona bien. Pero si cambia el tamaño de la ventana hasta que vea el ícono de la hamburguesa y luego se desplaza 100 px para habilitar el encabezado fijo, verá un ligero salto en el contenido. Debido a que la altura del encabezado se calcula de acuerdo con la vista del escritorio, por lo tanto, el valor de relleno del cuerpo que se agrega es este valor, pero lo necesito para volver a calcular la altura del encabezado después de cambiar el tamaño y aplicar este nuevo valor al cuerpo como parte superior del relleno.

 var navbar = document.querySelector(".navbar"); var navbarClass = navbar.classList; var navbarH = navbar.offsetHeight; var scrollOffset = 500; function setPadding(e) { if (e.currentTarget.pageYOffset > scrollOffset) { document.body.style.paddingTop = navbarH + "px"; } else { document.body.style.paddingTop = ""; } } window.addEventListener("scroll", (e) => { if ( navbarClass.contains("transparent") && navbarClass.contains("navbar-light") ) { if (e.currentTarget.pageYOffset > scrollOffset) { navbar.classList.add("fixed"); } else { navbar.classList.remove("fixed"); } if (!navbarClass.contains("position-absolute")) { setPadding(e); } } else { if (e.currentTarget.pageYOffset > scrollOffset) { navbar.classList.add("fixed"); } else { navbar.classList.remove("fixed"); } setPadding(e); } });