Click targets scroll away with sticky elements - bug?

When utilizing the new Position: Sticky feature (thanks, btw!) in combination with auto layout margins, the click interaction hotspots do not stick with the frame and instead scroll away causing the interactions to be lost once the element sticks to the screen.

1 Like

Hey Tyler, I was not able to replicate this issue on my end :thinking:
I would suggest here contacting support


with a copy of your file.

Your prototype appears to be using position: fixed rather than position: sticky, but I can’t be sure without seeing the file. I have found that position: sticky works when there are no vertical margins applied, but adding the vertical margins is what seems to break it.

I’m attaching a prototype that demonstrates the issue. In the one that works you will see that the button scrolls behind the iPhone frame and so I would like to add some margin to the frame to prevent that from happening when it sticks at the top. Adding a vertical margin, however; is what seems to allow the click hotspot to detach and continue scrolling independent of its parent element. The hotspot will continue scrolling until it hits the top of the page, at which point it will stick. It seems as those the hotspot does not respect the parent element’s margins.

1 Like

Having the same issue - I have a header with a button (say, the Y position is 50px within this header that is sticky), but the hotspot for that button keeps scrolling up once the header sticks - and the hot spots go all the way to the 0px position. Looking forward to a fix!

Seems like the issue was resolved today. Yay :tada: Love this feature.

2 Likes

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