我有带有 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.4 节
- 第 1.3 节
- 第 1.4 节
- 1.5 h4 节
- 第 1.4 节
- 第 1.3 节
我需要实现的是使所有 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-面板
有没有。实现以下目标的方法?
最佳答案
这就是您正在寻找的东西吗? (您可能必须全屏运行代码片段才能看到它的工作。)在这个例子中,.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>
关于jquery - 相对于另一个同级容器的粘性 header ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57931858/