The page does not have jquery so this needs to be done by vanilla JS only.
The header is fixed to the top i.e position:fixed; and so is taken away from the regular flow and the banner below takes it place causing an overlap.
<header class="site-header fixed-top">
fixed top header
</header>
<section class="banner">
banner
</section>
To remedy this, I want to give the .banner section a top margin equaling the height of .site-header.
I have got the height by using the JS below,
var headerHeight = window.getComputedStyle(document.getElementsByClassName("site-header")[0]).height;
But having trouble finding the right way to target the next element .banner
By traversing the DOM tree in the console I found that the following leads to it but it seems wrong and complicated.
document.getElementsByClassName("site-header")[0].nextSibling.nextElementSibling.style.marginTop = headerHeight;
Is there a better and easier way to do it?
Sticky acts like a fixed when it is sticked but acts like a static element while it is not. It means you don't need to margin-top anything. It just works in native way.
.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>You can use offsetHeight or clientHeight for the header height, and use previousElementSibling to find the section preceded by the header. Something like:
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>Or indeed jax-p's css sticky solution (not (completely) supported by specific or older browsers)