计算固定页眉的高度，并将其作为其下方元素的上边距

Question

该页面没有jquery，所以这需要通过香草JS来完成。

标题固定在顶部，即position:fixed;，因此从常规流中取出，下面的横幅取代它，造成重叠。

<header class="site-header fixed-top">
fixed top header
</header>
<section class="banner">
banner
</section>

为了解决这个问题，我想给.banner部分一个等于.site-header高度的上边距。

我已经通过使用下面的JS得到了高度，

var headerHeight = window.getComputedStyle(document.getElementsByClassName("site-header")[0]).height; 

但是很难找到正确的方法来瞄准下一个元素.banner

通过在控制台中遍历DOM树，我发现了下面的结果，但它似乎是错误的和复杂的。

document.getElementsByClassName("site-header")[0].nextSibling.nextElementSibling.style.marginTop = headerHeight;

有没有更好更简单的方法?

Answer 1

CSS唯一解决方案

Sticky在被粘住的时候就像一个固定元素，而在没有被粘住的时候就像一个静态元素。这意味着你不需要设置任何边距。它只是以本地方式工作。

.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>

Answer 2

您可以使用offsetHeight或clientHeight作为标题高度，并使用previousElementSibling来查找标题前面的部分。比如:

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>

或者jax-p的csssticky解决方案(不(完全)被特定或旧的浏览器支持)