La página no tiene jquery, por lo que esto solo debe hacerlo Vanilla JS.
El encabezado se fija en la parte superior, es decir position:fixed; y así se quita del flujo regular y el banner de abajo toma su lugar provocando una superposición.
<header class="site-header fixed-top"> fixed top header </header> <section class="banner"> banner </section> Para remediar esto, quiero darle a la sección .banner un margen superior igual a la altura de .site-header .
Obtuve la altura usando el JS a continuación,
var headerHeight = window.getComputedStyle(document.getElementsByClassName("site-header")[0]).height; Pero tengo problemas para encontrar la forma correcta de apuntar al siguiente elemento .banner
Al recorrer el árbol DOM en la consola, descubrí que lo siguiente conduce a él, pero parece incorrecto y complicado.
document.getElementsByClassName("site-header")[0].nextSibling.nextElementSibling.style.marginTop = headerHeight;¿Hay una manera mejor y más fácil de hacerlo?
Sticky actúa como fijo cuando está adherido, pero actúa como un elemento estático cuando no lo está. Significa que no es necesario que marque nada. Simplemente funciona de forma nativa.
.site-header { background: yellow; padding: 4rem 0; position: sticky; top: 0; } .wrap { height: 1000px; } <div class="wrap"> <header class="site-header"> fixed top header </header> <section class="banner"> banner </section> </div>Puede usar offsetHeight o clientHeight para la altura del encabezado y usar previousElementSibling para encontrar la sección precedida por el encabezado. Algo como:
setTimeout(setSectionMargin, 1000); function setSectionMargin() { const sectionAfterFixedHeader = [...document.querySelectorAll(`.banner`)] .filter(b => b.previousElementSibling.classList.contains(`fixed-top`)).pop(); if (sectionAfterFixedHeader) { const header = sectionAfterFixedHeader.previousElementSibling; sectionAfterFixedHeader.style.marginTop = `${header.clientHeight}px`; } } .fixed-top { position: fixed; top: 0; } .site-header { font-size: 1.2em; font-weight: bold; padding: 0.3em 0; } .banner { color: red; transition: all 1s 0s; } <header class="site-header fixed-top"> fixed top header </header> <section class="banner"> banner 1 </section> <section class="banner"> banner 2 </section> <section class="banner"> banner 3 </section> O, de hecho , la solución css sticky de jax-p ( no (completamente) compatible con navegadores específicos o más antiguos)