动态高度下,将粘性元素堆叠在其他粘性元素之后

6
我需要像这样堆叠几个粘性头部元素: 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解决方案。

也许你可以添加一些代码并展示你卡住的地方。 - MrMaavin
请查看此解决方案:https://dev59.com/0rPma4cB1Zd3GeqPtJk9#55941740 - Temani Afif
3个回答

5

也许您需要像这样使用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>


2
这是一个不错的JavaScript解决方案。但我仍在寻找纯CSS解决方案。 - hirantha129

0

我认为仅凭 CSS 是无法实现这一点的。即使你成功了,它也会非常脆弱,并且你需要考虑到有些浏览器不支持 sticky 定位!我建议使用基于 JavaScript 的解决方案。


-1

使用纯CSS是不可能的,除非你有一个已知或固定高度的元素并且不增加元素高度,那么这是可能的(但不好)。另一种方法是使用简单的JavaScript计算元素高度并设置CSS位置top属性。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接