html - 当元素到达底部时，将其粘到顶部

Question

我没有找到正确的帖子来检查是否有人问/回复了这个......我正在尝试从https://www.aliciakeys.com/复制一个效果，其中元素高于窗口高度并且它们似乎粘在底部...

.slide 比窗口高，因为 .full-height 高度是 100vh，然后 .variable-height 是 200px ...

我使用粘性和顶部：0 因为如果我使用底部：0 它不起作用：S

我不能只用css复制它，有可能吗？我错过了什么？

非常感谢

body {
  margin: 0;
  padding: 0;
}
.slide {
  height: auto;
  position: sticky;
  top: 0;
}
.slide .full-height {
  height: 100vh;
  background: red;
  position: relative;
}
.slide:nth-child(odd) .full-height {
  background: cyan;
  }

.slide .variable-height {
  height: 200px;
  position: relative;
}

<div class="slide">
  <div class="full-height">Slide 1</div>
  <div class="variable-height">
    Text
  </div>
</div>
<div class="slide">
  <div class="full-height">Slide 2</div>
  <div class="variable-height">
    Text
  </div>
</div>
<div class="slide">
  <div class="full-height">Slide 3</div>
  <div class="variable-height">
    Text
  </div>
</div>
<div class="slide">
  <div class="full-height">Slide 4</div>
  <div class="variable-height">
    Text
  </div>
</div>

标签： htmlcss