Streaming live at 10am (PST)

Fix Element only within Section

Hello,

I am working on the “Product Case Study” tab on my site. Screen Shot 2020-03-31 at 6.17.07 PM
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)

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.

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

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!

Add live url.

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

Add screenshot

@Siton_Systems
Sure. Here it is:

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.

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