我很难理解为什么粘性div不会推动其他粘性div。 我非常确定我曾经看过它像这样工作,但是我无法弄清楚。
我希望标题1能够推动标题2,而不是重叠在上面。 HTML
<div class="header">
<h1>Header 1</h1>
</div>
<div class="item">
<h1>Item1</h1>
</div>
<div class="item">
<h1>Item2</h1>
</div>
<div class="header">
<h1>Header 2</h1>
</div>
<div class="item">
<h1>Item1</h1>
</div>
<div class="item">
<h1>Item2</h1>
</div>
CSS
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
h1 {
text-align: center;
color: #000;
font: bold 20vw Helvetica, Arial, sans-serif;
}
.header {
position: sticky;
top: 0px;
height: 100%;
width: 100%;
background: white;
}
.item {
height: 100vh;
width: 100%;
background: #00f;
}
这是一个例子,我想要做的是:
https://jsfiddle.net/7zfq491o/