Topic: Sticky image in column while scrolling

Cyrielle
March 28, 2024 at 1:49 am
Hi,

I am so sorry if the subject has already been discussed but I have tried a lot of things I read here an I can’t understand why this is not working for me…

I just want to make the image in left column of the grid sticky while we scroll so that the long text in right column can be scrolled and still have the image displayed to the left: https://defis-brigade.instawp.xyz/sticky-image/

I added this CSS, with mystickyelement on the image bloc and sticky-column on the left column (container):
```
.mystickyelement {
    position: sticky;
    position: -webkit-sticky;
    top: 50px; /* Offset from top of container */
}

.sticky-column > .gb-inside-container {
    height: 100%;
}
```
I also tried giving height:100% to the 2 columns. But it doesn’t work.

Thank you for your help!
David
March 28, 2024 at 5:04 am
Hi there,

try this:
```
.sticky-column {
    position: sticky;
    top: 50px;
}
```
it will make the entire contents sticky.
Cyrielle
March 28, 2024 at 5:15 am

I feel silly. So simple!! Thank you so much David for your help as always.
David
March 28, 2024 at 5:41 am

You’re very welcome 🙂

Viewing 4 posts - 1 through 4 (of 4 total)

Sticky image in column while scrolling