元素粘在其他元素的底部

【问题标题】：Element to stick to bottom of other element元素粘在其他元素的底部
【发布时间】：2022-11-01 16:29:29
【问题描述】：

所以我想要实现的是让一个 div 元素坚持滚动到导航标题元素底部，但它们不在同一个父级中，标题也消失 onscroll 向下并重新出现 onscroll up 这是codepen的链接

.red-div {
  background-color: red;
  width: 100%;
  height: 50px;
  position: sticky;
  top: 0;
}

.green-div {
  background-color: green;
  width: 100%;
  height: 400px;
}

.test2 {
  width: 100%;
  height: 100px;
}

.blue-div {
  background-color: blue;
  width: 100%;
  height: 30px;
}

<nav class="red-div"></nav>
<div class="green-div">
  <div class="test2"></div>
  <div class="blue-div"></div>
</div>

所以就像代码中显示的那样，我希望蓝色 div 贴在红色 div 滚动条下。

【问题讨论】：

标签： javascript html css

【解决方案1】：

因此，您需要将position: sticky 和top 设置为等于50px 的红色导航高度，例如top: 50px;

.red-div {
  background-color: red;
  width: 100%;
  height: 50px;
  position:sticky;
  top:0;
}

.green-div {
   background-color: green;
  width: 100%;
  height: 400px;
}

.test2 {
  width: 100%;
  height: 100px;
}

.blue-div {
  background-color:blue;
  width: 100%;
  height: 30px;
  position: sticky;
  top: 50px;
}

<nav class="red-div"></nav>
<div class="green-div">
  <div class="test2"></div>
  <div class="blue-div"></div>
</div>

【讨论】：

您好 Mina，感谢您的回答，但我无法设置 top: 50px;，因为红色 div 会随着向下滚动（在我的真实代码中）而消失，顶部 50px 和蓝色 div 将与顶部保持 50px 的距离。我需要的是当红色 div 滚动消失时，蓝色的 div 会粘在屏幕顶部。