Question 241706 in Html Question posted in
Some basic documentation can be found here.

Html – Position sticky from bottom when the bottom enter the view

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!

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    Implement a "position: sticky" behavior from the bottom as it enters the viewport. This ensures that the element remains fixed at the bottom of the screen when scrolled to, enhancing user experience.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search