滚动后使 div 粘在其容器 div 的底部答案

【问题标题】：Make div stick to bottom of its container div after scrolling滚动后使 div 粘在其容器 div 的底部
【发布时间】：2019-10-06 18:25:10
【问题描述】：

我正在尝试让 div（后来：#blue-element）在向下滚动时向上移动，并让它在某个点停止向上移动，即使我继续滚动。

我试过用：

对齐自我：弹性结束；元素保持在顶部。底部：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 应该正常滚动。

【问题讨论】：

标签： html css

【解决方案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>

【讨论】：