Make an element sticky and then scrollable?-CodePudding

i have two griditems on the page both have 1fr 1fr, the first one has seven images and the second griditem has text, when i scroll down i want to make the second griditem sticky so when the first griditem images completes on then move both on scroll.

for reference this site has example at the top: https://theoodie.co.uk/collections/teen-adult/products/grey-oodie

i have write down the html and css but couldn't figure out how to apply that effect?

CodePudding user response：

You can easily make a child sticky, while their sibling scrolls. Make sure they have the same parent and make sure the parent is bigger than the viewport height so the sticky sibling has time to stick.

I hope this helps:

* {
    margin: 0;
    padding: 0;
}



body {
    padding: 2em;
}
.container,
.imgContainer {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2em;
}
.container {
    margin-bottom: 100vh;
}

.imgContainer img:first-of-type {
    grid-column-start: 1;
    grid-column-end: -1;
}

img {
    width: 100%;
    height: fit-content;
    object-fit: cover;
}

.textContainer {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    background-color: pink;
    height: fit-content;
}

  <div >
    <div >
      <img src="https://images.unsplash.com/photo-1481349518771-20055b2a7b24?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cmFuZG9tfGVufDB8fDB8fA==&w=1000&q=80" alt="">
      <img src="https://images.unsplash.com/photo-1481349518771-20055b2a7b24?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cmFuZG9tfGVufDB8fDB8fA==&w=1000&q=80" alt="">
      <img src="https://images.unsplash.com/photo-1481349518771-20055b2a7b24?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cmFuZG9tfGVufDB8fDB8fA==&w=1000&q=80" alt="">
      <img src="https://images.unsplash.com/photo-1481349518771-20055b2a7b24?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cmFuZG9tfGVufDB8fDB8fA==&w=1000&q=80" alt="">
      <img src="https://images.unsplash.com/photo-1481349518771-20055b2a7b24?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cmFuZG9tfGVufDB8fDB8fA==&w=1000&q=80" alt="">
      <img src="https://images.unsplash.com/photo-1481349518771-20055b2a7b24?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cmFuZG9tfGVufDB8fDB8fA==&w=1000&q=80" alt="">
      <img src="https://images.unsplash.com/photo-1481349518771-20055b2a7b24?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cmFuZG9tfGVufDB8fDB8fA==&w=1000&q=80" alt="">
      <img src="https://images.unsplash.com/photo-1481349518771-20055b2a7b24?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cmFuZG9tfGVufDB8fDB8fA==&w=1000&q=80" alt="">
      <img src="https://images.unsplash.com/photo-1481349518771-20055b2a7b24?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cmFuZG9tfGVufDB8fDB8fA==&w=1000&q=80" alt="">
    </div>
    <div >
      <h1>position: sticky; </h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac tincidunt odio. Donec odio nibh, consequat a nunc eu, ullamcorper vestibulum justo. Cras rutrum bibendum enim. Cras eget justo nulla. Quisque pulvinar eros eleifend risus facilisis laoreet at sit amet eros. Phasellus vehicula ex eget libero luctus, a semper quam suscipit. Vestibulum in risus fringilla, gravida ipsum a, rhoncus nisl. Sed pellentesque at lacus hendrerit blandit. Aliquam elementum odio sit amet elementum finibus.</p>
    </div>
  </div>