Fixed Positioning Starting At Certain Scroll Depth (position sticky)

This worked for me! took a bit to figure it out, but opening an overlay works like a charm for me. Good solution to a big problem!

Amazing! Thank’s!

I agree this feature would be extremely helpful with demos. Please, add this!

1 Like

Navigate to Mr.Robot’s Card (click on it). When the Season 1 page shows, scroll down and see the sticky header in action as the episode menu nests underneath the main header. Workaround on XD.

1 Like

@Gleb: I have been trying to rebuild my XD Prototype in Figma, and find it extremely difficult to replicate / emulate a few of its interactions natively. I’ve been considering setting it up in Protopie, but honestly have no idea if it will pay off.
The link in the post above shows how I’ve managed to dock the “Episodes / Related / Details” bar right below the main navigation header, on scroll. This workaround did not involve multiple frames, but rather masking elements and adjusting their layer order.
All nav elements have been achieved using nested components, such as the navigation on the video player segment - accessed by clicking on either S1E3 or S2E1 of Mr.Robot. The video shorts were also pasted on single frames. They can be accessed by clicking on the ‘Episodes’ icon, which will open a series of nested component overlays.

1 Like

https://app.box.com/s/n1uuu6imdpxztcblg1nk9qxrbzu1del6

Sooo how can I help you? It’s simply not possible in Figma.

Any idea when this feature will be available?! Please please Figma =)

Trying to do this now. Good to know its futile at this point.

1 Like

We are trying to fix the right/left vertical bar at a specific position but it seems there is no direct solution to achieve this with Figma at this point in time.
This feature is really needed. please Figma!

This feature is much needed, go go go Figma!

1 Like

This would be really useful! @D-Edge hope you would be adding this as your new updates!

Seems like this would easy enough to develop - fixed position on scroll stops at a certain y-position on prototype scroll, and starts again when scrolling up. Come on guys, right now the fixed position feature is half-baked until you implement this, and it’s been 2 years.

1 Like

Here’s a band-aid solution that might help people. It’s super hacky and YMMV depending on finesse, screen size etc. But if you’re the one presenting a prototype, scroll as described and set dimensions accordingly, it can work-kinda. Sticky example is in 3rd section of the webpage:

Check notes on the file for context:

Prototype:

1 Like

You can pretty much achieve this by putting your element with fix positioning in a new frame that allows vertical scroll. Then you have 2 scroll areas. That allows you to show off and explain the effect. It worked for me.

Hey @stelios can you please explain this a bit further?

+1 - I used Aninix to solve the explained issue but the result - as great as it is - is a video.
The way Aninix lets you animate the elements on the page is how I know it from Principle. What’s missing there is a chance to link between elements/frames.

Come on Figmadobe!!

Could we have an update on this?

Yes! This would be super useful in many cases. Here’s another way someone could use this: RCA Programme finder. I think there’s no way to do this now…
There should be a way to assign where the fixed position would start and where it would stop in a specific frame.