html - 滚动后使 div 粘在其容器 div 的底部

Question

我正在尝试让 div(后来:#blue-element)在向下滚动的同时向上移动，并让它在某个点停止向上移动，即使我继续滚动也是如此。

我尝试过使用:

对齐 self : flex 结束；元素保持在顶部。底部:0px；该元素一直停留在底部，但无法再滚动。边距顶部:自动；它没有将元素向下推。底部边距:自动；它没有将子元素向下推。

HTML

<div id="brown-container">
 <div id="green-element">Some stuff</div>
 <div id="blue-element>Some stuff</div>
</div>

CSS

#brown-container {
 top: 10%
 height: 80%
}
#green-element {
 height: 1000px
}
#blue-element {
 code: that did not work;
}

我在下面有一个png示例

#green-element 应该正常滚动。

Answer 1

您可以使用 position: sticky; 和使用 viewport-height 设置的 top

#brown-container {
  top: 10%;
  height: 80%
}

#green-element {
  height: 500px;
  background: green;
}

#blue-element {
  background: blue;
  position: sticky;
  top: 75vh;
}

#other-element {
  height: 500px;
  background: yellow;
}

<div id="brown-container">
  <div id="green-element">Some stuff</div>
  <div id="blue-element">Some stuff</div>
  <div id="other-element">Other stuff</div>
</div>