当 div 具有动态高度内容时，如何将 div 粘贴在其他粘性 div 下方？

Question

我在顶部有可滚动文本，它根据下面的内容具有动态高度，该文本具有粘性标题，其下方也具有动态高度，我正在尝试添加另一个粘性标题，但是对于第二个标题，我不确定我应该在多少顶部给？有什么技巧可以在运行时计算位置还是有其他方法？

.container {
  height: 200px;
  overflow: scroll;
}

.content {
  background-color: gray;
}

.header1 {
  position: sticky;
  top: 0px;/* or whatever you wish to see it sticks */
  background-color: red;
}
.header2 {
  position: sticky;
  top: 0px;/* how to stick thi div below header1 */
  background-color: blue;
}

.footer {
  /*top: 10px;*//* useless if position is not reset to fixed,absolute or sticky */
  background-color: yellow;
  height: 400px;
}

<div class="container">
  <div class="content"> runtime example text<br> runtime example text<br> runtime example text </div>
  <div class="header1"> header text runtime dynamic text </div>
  <div class="header2"> header text </div>
  <div class="footer"> footer text </div>
</div>

Answer 1

标题肯定是 <h1> 或 <h2> 并且是 div 的子级。这应该可以解决您的问题。

.container {
  height: 200px;
  overflow: scroll;
}

.content {
  background-color: gray;
}

.header1 h1 {
  position: sticky;
  top: 0px;/* or whatever you wish to see it sticks */
  background-color: red;
}
.header2 h1 {
  position: sticky;
  top: 0px;/* how to stick thi div below header1 */
  background-color: blue;
}

.footer {
  /*top: 10px;*//* useless if position is not reset to fixed,absolute or sticky */
  background-color: yellow;
  height: 400px;
}

<div class="container">
  <div class="content"> runtime example text<br> runtime example text<br> runtime example text </div>
  <div class="header1">  <h1>header text runtime dynamic text</h1> </div>
  <div class="header2"> <h1>header text</h1> </div>
  <div class="footer"> footer text </div>
</div>