当底部进入视图时从底部开始粘性

Question

我不希望它从顶部粘起来，我希望它从底部粘起来，但它不起作用，我的描述在代码下面！

检查此代码：

*{
  margin: 0;
  padding: 0;
}
.parent{
  background-color: #d1ffed;
  width: 100%;
  height: 1500vh;
  position: relative;
}
.box{
  margin: 0 auto;
  width: 90%;
  height: 300vh;
}
.box1{
  background-color: red;
}
.box2{
  background-color: blue;
}
.box3{
  background-color: green;
}
.box4{
  background-color: yellow;
}
.box5{
  background-color: purple;
}
.child{
  width: 80%;
  height: 150vh;
  background-color: orange;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  position: sticky;
  top: 0; //when using top:0 works as well
}
.title{
  color: white;
}

<div class="parent">
  <div class="box box1">
    <div class="child">
       <h1 class="title">TOP 1</h1>
       <h1 class="title">BOTTOM 1</h1>
    </div>
  </div>
  <div class="box box2">
    <div class="child">
       <h1 class="title">TOP 2</h1>
       <h1 class="title">BOTTOM 2</h1>
    </div>
  </div>
  <div class="box box3">    
    <div class="child">
       <h1 class="title">TOP 3</h1>
       <h1 class="title">BOTTOM 3</h1>
    </div></div>
  <div class="box box4">
     <div class="child">
       <h1 class="title">TOP 4</h1>
       <h1 class="title">BOTTOM 4</h1>
    </div>
  </div>
  <div class="box box5">
     <div class="child">
       <h1 class="title">TOP 5</h1>
       <h1 class="title">BOTTOM 5</h1>
    </div>
  </div>
</div>

上面的代码如您所见，我有一个高度很高的父 div 1500vh。

在这个父 div 内部，我还有另一个 div，这些 div 中的每一个都占据父视图的 20%，这意味着 300vh。

所以我的问题是如何使具有 class="child" 的 div 从底部粘住，我的意思是当每个 div 的底部进入视图时，div 应该是粘性的，更清楚地说，div 应该当

<h1 class="title">BOTTOM</h1>

时保持粘性

感谢您的阅读！

Answer 1

将其放在底部然后使用

bottom: 0;

*{
  margin: 0;
  padding: 0;
}
.parent{
  background-color: #d1ffed;
  width: 100%;
  height: 1500vh;
  position: relative;
}
.box{
  margin: 0 auto;
  width: 90%;
  height: 300vh;
  display: flex; /* you need this for the margin-top: auto */
}
.box1{
  background-color: red;
}
.box2{
  background-color: blue;
}
.box3{
  background-color: green;
}
.box4{
  background-color: yellow;
}
.box5{
  background-color: purple;
}
.child{
  width: 80%;
  height: 150vh;
  background-color: orange;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  position: sticky;
  margin-top: auto; /* push to bottom*/
  bottom: 0;  /* stick to bottom */
}
.title{
  color: white;
}

<div class="parent">
  <div class="box box1">
    <div class="child">
       <h1 class="title">TOP 1</h1>
       <h1 class="title">BOTTOM 1</h1>
    </div>
  </div>
  <div class="box box2">
    <div class="child">
       <h1 class="title">TOP 2</h1>
       <h1 class="title">BOTTOM 2</h1>
    </div>
  </div>
  <div class="box box3">    
    <div class="child">
       <h1 class="title">TOP 3</h1>
       <h1 class="title">BOTTOM 3</h1>
    </div></div>
  <div class="box box4">
     <div class="child">
       <h1 class="title">TOP 4</h1>
       <h1 class="title">BOTTOM 4</h1>
    </div>
  </div>
  <div class="box box5">
     <div class="child">
       <h1 class="title">TOP 5</h1>
       <h1 class="title">BOTTOM 5</h1>
    </div>
  </div>
</div>

Answer 2

在进入视口时从底部实现“位置：粘性”行为。这确保了元素在滚动到时保持固定在屏幕底部，从而增强用户体验。