Streaming live at 10am (PST)

Collections cancelling 'sticky' position

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)

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.

solution:

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

image

In your code add selector for the collection item.

This is not a bug

1 Like

That worked perfectly.
THANK YOU!!

Cheers
Grant

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.