jquery - 相对于另一个同级容器的粘性 header

Question

我有带有 2 个子元素的 wrapper-div:.content-panel 和 main-content。我的 main-content 容器有多个嵌套元素，在最内层它有元素列表，每个元素里面都有 h4 元素:

.wrapper-div:

.内容面板

.主要内容

• 第一节

  • 1.1 节 vse-lb-元数据
  • 第 1.2 节 vse-rvs-carousel
    • 第 1.3 节
      • 第 1.4 节
        • 1.5 h4 节
    • 第 1.3 节
      • 第 1.4 节
        • 1.5 h4 节

我需要实现的是使所有 h4 div(第 1.5 节)的粘性 header 行为与这个简单示例中的粘性 header 完全一致 - http://jsfiddle.net/4tmcLjq3/3/ , 使用 position:sticky。

问题是我的标题相对于 .content-panel 类的底部应该是粘性的。我知道 .content-panel 底部位置始终为 250px。但是，将 position 设置为我的 h4 元素 sticky 并将 top position 设置为 250 没有任何作用:

h4 {
  position: sticky;
  top: 250px;
}

正如我从我的 HTML 中看到的那样，这是因为将 top: 250px 设置为 h4 元素会使它们相对于其父容器向下移动，而不是相对于窗口或 .content-面板

有没有。实现以下目标的方法？

Answer 1

这就是您正在寻找的东西吗？ (您可能必须全屏运行代码片段才能看到它的工作。)在这个例子中，.content-panel高度250px并且是灰色的。 <h4>标题是黄色的，内容 block 是红色的。我设置了他们的 height: 200px让页面滚动。

请注意，您仍然需要设置 top: 250px对于粘性<h4>元素，即使 .main-content具有相同的属性。知道 .content-panel 的高度使这变得容易得多。

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.content-panel {
  height: 250px;
  width: 100%;
  position: fixed;
  top: 0;
  background-color: #f0f0f0;
  z-index: 2;
}
.main-content {
  position: relative;
  top: 250px;
}
.content-div {
  height: 200px;
  background-color: #8b0000;
}
h4 {
  position: sticky;
  background-color: yellow;
  top: 250px;
}

<div class="wrapper-div">
<div class="content-panel">
content panel content
</div>
<div class="main-content">
<ul>
<li>
  <div>
    <h4>Header 1</h4>
    <div class="content-div">Content 1</div>
  </div>
</li>
<li>
  <div>
    <h4>Header 2</h4>
    <div class="content-div">Content 2</div>
  </div>
</li>
</ul>
</div>