Fix Element only within Section

[almanac]

Hello,

I am working on the “Product Case Study” tab on my site.
I am trying to create a page in which I have text boxes, like the one in the below screenshot, scroll into view with the other images in the same div block, stop and be fixed/sticky to the middle of the view height while the rest of the images to its left within the same div block scroll, and then scroll out of view once all of the images have been scrolled past:

Basically, is it possible to have an element that is sticky only within a section/div block?

I found this similar post but am unfamiliar with javascript and how to integrate it into the custom code of my site. Fixed Element only for a Section

@Siton_Systems I saw you mentioned you could put together a tutorial. Could you possibly do that for me if your solution to above would apply here as well?

Thanks in advance!
James

---

Here is my site’s published link: LINK
Here is my site Read-Only: LINK
(how to share your site Read-Only link)

[DFink (Dave)]

Yes, just set the parent element to position:relative and then the fixed elements set to absolute. They will remain fixed where you put them inside the parent.

[Siton_Systems (Ezra Siton)]

@almanac

Could you possibly do that for me if your solution to the above would apply here as well?

I create a basic tutorial (Update if you won’t succeed).

How to use Webflow & Sticky.js

Webflow already supports sticky-position, set the div to sticky and the wrapper position to relative. Its better first to solve this issue by webfow core options. For extra control (Change margin-top, add a class when the sticky is true and so) - try this plugin. Less than one-minute solution: “Simple Solution (~1.67kb code)”: Sticky-js is a library for sticky elements written in vanilla javascript. With this library you can easily set sticky elements on your website. It’s also responsive. …

[almanac]

Wow awesome very straightforward tutorial. Thank you!

I got the sticky elements working on the page from above but have two problems:

1: When the text boxes change from scrolling to being fixed the margin shifts on the top and left. Is there a way to make it stay the same?

2: I would like the text boxes to sit halfway down the window height. Is this possible?

Thanks again!

[Siton_Systems (Ezra Siton)]

Add live url.

Did you try to set the position of the element to sticky and the wrapper to relative?

@almanac

2: I would like the text boxes to sit halfway down the window height. Is this possible?

Add screenshot

[almanac]

@Siton_Systems
Sure. Here it is:

@almanac

Here is my site’s published link: LINK
Here is my site Read-Only: LINK

I have tried the element as sticky and wrapper relative as you say.

I would like the element to scroll in, then sit in the middle of the view height like this screenshot:

is there a way to make the data-margin-top to stop the element when it is in the middle instead of a set distance from the top?

Also if you scroll down the page on my published site you will see that when the text boxes hit their fixed marker they shift about 1 pixel to the left.

[almanac]

@Siton_Systems sorry just following up on this. Thank you so much!