Kevin Powell - Community•13mo ago

Keep element in viewport up until a certain point

I'm currently facing a challenge i'm not so sure about how to approach and curious with what kind of solution some of you smart people over here come up with. Basically I have a page with multiple sections and one of those sections has an image with some text next to it. When I scroll down further, I want the image to follow the viewport, until the text from the next section arrives next to the image. Then, when I scroll down even further, the image should leave the viewport together with the text, to make room for the next, full page section. I've made a little sketchup to clarify what I mean. I'm looking for a pure css solution, any ideas?

5 Replies

MarkBoots•13mo ago

if you make those 2 sections 1, with 2 columns. you can make the image sticky to the top

ccabdOP•13mo ago

That's a great idea, i'm gonna give it a try 🙂

MarkBoots•13mo ago

here a simple example https://codepen.io/MarkBoots/pen/abXJERb

ccabdOP•13mo ago

didn't get a notification so I went and built it myself 😅 but its good to see that you implemented it the same way as I did now i'm trying to come up with a way to extend the background of the sections to the full width of the viewport, but i don't think it's possible using position: sticky. maybe you have an idea? @MarkBoots heres my codepen btw https://codepen.io/codecab/pen/yLZMjPx

MarkBoots•13mo ago

hm, you could try this. a pseudo element with the background

.text {
  flex-grow: 1;
  & section {
    position: relative;
    &::after {
      content: "";
      position: absolute;
      right: 0;
      width: 100vw;
      height: 100%;
      background-color: inherit;
      z-index: -1;
    }
  }
}

.text {
  flex-grow: 1;
  & section {
    position: relative;
    &::after {
      content: "";
      position: absolute;
      right: 0;
      width: 100vw;
      height: 100%;
      background-color: inherit;
      z-index: -1;
    }
  }
}

Gaming

Programming

Keep element in viewport up until a certain point