Streaming live at 10am (PST)

Sticky interactive image inside absolute container

Hi

I have an absolute container on the right side of the page where the image interacts with mouse movements, however, I want this image to stick as soon as I start to scroll. I have set sticky with a 30 px from the top, but the stick doesn’t seem to stick the whole page, only to the container of it, is there any way around this so that I can have it stick through an all the different sections?


Here is my site Read-Only:
https://preview.webflow.com/preview/function-tester?utm_medium=preview_link&utm_source=dashboard&utm_content=function-tester&preview=7afe901ae03c4c493bbdbb58f3baa9e7&mode=preview

You can change your container position from ABSOLUTE to FIXED, this can do the job. Is this what you are looking for?

Thanks for the reply

yes and no, I just tried the fixed position, it does work, but when I click my preview link, the image itself scrolls with the page, but when I turn off and on preview it works normally, is this a problem with preview? or is this a problem with the effects loading?

and I have one more question to add

if I added another section underneath, and both sections are 100VH I want the image to stop scrolling when it hits the next grey section is that possible?

I have set the sticky with a bottom value, but it doesn’t seem to stop sticking?

with first Q. Always publish your changes. with second Q I do not understand what you are trying to achieve. What image you want to stop scrolling? Your image is now “fixed”. You can change its state by adding some action.

Thanks for the quick reply
I have redone the share link too
https://preview.webflow.com/preview/function-tester?utm_medium=preview_link&utm_source=dashboard&utm_content=function-tester&preview=6635366d216fa961a0f10f3d9e4ad0e7&mode=preview

for the 2nd question, what I meant is when the whole page scrolls down to the grey section, the image doesn’t follow the scrolling, but stays at a specific value, like halfway between the red and grey section.

Yes thats correct behaviour because image is static. I think that you can change image from static back to absolute with action and make it smooth with some animation

Thanks

I got it, i set the original container of the image to absolute with 230 VH with a 40VH top padding

then i have the inside image that moves to sticky with 40VH top padding now this image follows and scrolls to where ineed