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

Html – How to stick to bottom on scrolling?

I’m trying to achieve a similar I saw here

but the content of each section should also be scroll-able i.e. they should only stick when the bottom of the section has been reached.

for example when the content is 200vh like this:

section {
  position: sticky;
  top: 0;
  height: 200vh;
}

section img{
  width:100%;
  height:100%
}


section:nth-of-type(1) {
  background: rgb(225, 204, 200);
}

section:nth-of-type(2) {
  background: rgb(240, 216, 163);
}

section:nth-of-type(3) {
  background: rgb(192, 211, 217);
}
<section>
    <img src="https://picsum.photos/id/128/800/300" alt="">
</section>

<section>
    <img src="https://picsum.photos/id/48/800/300"alt="">
</section>

<section>
    <img src="https://picsum.photos/id/42/800/300" alt="">
</section>

as you can see 1 & 2 sections stick to the top & we can’t scroll through it’s photo
but the last section works perfectly.

so how do I achieve this effect? Ideally with pure css but I’m open to a javascript solution

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found a solution! Using a one liner in javascript to set the top

    document.querySelectorAll(".item").forEach((el)=>{ el.style.top=(document.documentElement.clientHeight - el.offsetHeight)+"px" });
    section{
  position:sticky;
  width:100%;
  height:200vh;
}

img{
  object-fit:cover;
  height:100%;
  width:100%;
}
    <section class="item">
 <img src="https://picsum.photos/id/128/800">
</section>

<section class="item">
  <img src="https://picsum.photos/id/48/800">
</section>

<section class="item">
  <img src="https://picsum.photos/id/42/800">
</section>

    Though I'm not sure if this will work if the window is resized
    but you can always use onresize to cover that case

    I'm still open to a pure css solution if there is one?


  2. 0

    I has able to solve this by wrapping the sections into a main div section and few extra lines of css however to achieve the exact same style as the example you gave the sections have to be 100vh. With 200vh this solution still works but you’ll have to do some extra scrolling to reach the next slide. I have prepared a codejs fiddle here with the working code, simply change 100vh to 200vh to see if it works for you.

    document.querySelectorAll(".item").forEach((el)=>{ el.style.top=(document.documentElement.clientHeight - el.offsetHeight)+"px" });
    .mainSection {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  height: 100vh;
}

section {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

section img {
  /*object-fit:cover;*/
  width: 70%;
  height: 100% overflow: scroll;
}


section:nth-of-type(1) {
  background: rgb(225, 204, 200);
}

section:nth-of-type(2) {
  background: rgb(240, 216, 163);
}

section:nth-of-type(3) {
  background: rgb(192, 211, 217);
}
    <div class="mainSection">
  <section class="item">
    <img src="https://picsum.photos/id/128/800/300" alt="">
  </section>

  <section class="item">
    <img src="https://picsum.photos/id/48/800/300" alt="">
  </section>

  <section class="item">
    <img src="https://picsum.photos/id/42/800/300" alt="">
  </section>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search