在具有动态高度的其他粘性元素之后堆叠粘性元素

Question

我需要堆叠一些粘性标题元素，如下所示： https ://webthemez.com/demo/sticky-multi-header-scroll/index.html

stackover这里有这个问题的解决方案。但就我而言，我的粘性标题具有动态高度。因此不可能对棒头的顶部位置进行硬编码。我的代码如下：

html

<div class="sticky-header1">
    Header 1 with dynamic height
</div>
<div>
    Header 1 content
</div>

<div class="sticky-header2">
    Header 2 with dynamic height
</div>
<div>
    Header 2 content
</div>

CSS

.sticky-header1,
.sticky-header2
{
    position: sticky;
}

在这种情况下是否可以设置堆叠粘性标头？首选纯 CSS 解决方案。

Answer 1

也许你需要像这样使用javascript：

firstdiv =document.querySelector(".first");
secondiv =document.querySelector(".second");
thirdiv = document.querySelector(".third");
const fheight = firstdiv.offsetHeight;
const sheight = secondiv.offsetHeight;
secondiv.style.top= `${fheight}px`;
thirdiv.style.top= `${fheight+sheight}px`;

body {
  margin:0;
  min-height:200vh;
  border:2px solid;
}
.first {
  height:50px;
  background:red;
  position:sticky;
  top:0;
}

.second {
  height:60px;
  background:blue;
  position:sticky;
}
.third {
  height:80px;
  background:green;
  position:sticky;

}

<div class="first"></div>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<div class="second"></div>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<div class="third"></div>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>

Answer 2

使用纯 CSS 是不可能的，如果已知或恒定高度元素而不增加元素，那么这是可能的（这不好）。另一种方法是使用简单的 javascript，仅计算元素高度并设置 CSS 位置top属性。