Position sticky from bottom when the bottom enter the view

August 31, 2023

I don’t want it to be sticky from top, I want it from bottom but it doesn’t works, my description is under the code!

check this code:

*{
  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>

this code above as you see I have a parent div with high height 1500vh.

inside of this parent div I have another divs, each one of these divs takes 20% of the parent view which means 300vh.

so my question is how to make the div which have class="child" sticky from the bottom, I mean when the bottom of every div enter the view then the div should be sticky, to be more clearly, the div should be sticky when the <h1 class="title">BOTTOM</h1>

thank you for reading!

>Solution :

Place it at the bottom then use 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>