Collections cancelling 'sticky' position

[grantsenior]

Hi. I have a problem where using a collection to deliver the content to the page has turned off the css attribute that was part of the design to the page. Is there a fix for this or is this to be expected.
This is the original page with static content, you’ll see that the people images on the left hand, when scrolling down, stick to the top of the page.
https://sangro-chambers.webflow.io/old-home

But on this page where the people’s image and details are being delivered via a collection https://sangro-chambers.webflow.io - the sticky effect is no longer working. Is there a reason for this that I can manage?

This is the CSS controlling the sticky action on both pages
.sect-img {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
top: 107px;
}

---

Here is my site Read-Only: https://preview.webflow.com/preview/sangro-chambers?utm_source=sangro-chambers&preview=c0d0a76dc51bf3d7d5cfd6aae2827415
(how to share your site Read-Only link)

[Siton_Systems (Ezra Siton)]

Nesting issue - little hard to explain but if you put sticky inside a div - the div never get scroll (So no meaning for the sticky). The sticky most of the times is for body scroll.

Sticky position CSS in nested div not working

solution:

Set the collection-item (“parent of img”) as sticky (Not the image inside the collection item).

In your code add selector for the collection item.

This is not a bug

[grantsenior]

That worked perfectly.
THANK YOU!!

Cheers
Grant