LAUNCHED: Elements now stick to the top when vertically scrolling in prototyping

Currently the only function of fixed positioning on an element is to make it persistent in the same spot at all times. While this is useful the majority of the time, there are instances where it would be helpful to have an element become fixed when it scrolls into view or reaches the top of the screen.

For example, there could be a web page that has a secondary navigation below the hero that will become fixed when it reaches the top of the screen and be persistent for the rest of the scroll depth. Then when a user scrolls back up, the element releases from the fixed position when it reaches its original position. You can see this in effect on this page: Develop custom experiences with the Zendesk Platform | Zendesk Sunshine. It could also be used in more advanced manners such as multi-level parallax scrolling.

Zendesk scroll example

This would be very helpful for both engineering and stakeholders to understand functionality, especially when the designer isn’t there to describe it to them. It would also prove useful for user testing to understand if a chosen function works for users prior to spending time in engineering.

Does anyone have any other solution to this that I’m missing?

Thank you in advance and looking forward to hearing back!

235 Likes

On the web this is called position: sticky and is a very useful feature that is near impossible to document for developers now in Figma. It would be great to have this feature, particularly with offsets like the web version has so it doesn’t only stick to top or bottom exactly.

40 Likes

Would love this!

9 Likes

Right now, you can do this by adding a “subframe” with vertical scroll active in it.
It’s not a great experience but you can build something like that.

13 Likes

Hi guys,There is another way to do it. I had the same issue, with a double menu. I have my main header and another header that need to stick and replace my main header. The idea here is to put invisible buttons on your page. 2 exactly: one on hover when you are at the moment when you want your other header to appear in overlay in the top/center, and another one to close this overlay when you go back to the top. it doesn’t work perfectly, but it make the trick. Sorry for my english, I’m a little bit rusty.

Here is the example that I’m working on. I hope it will help you.

33 Likes

Here is another example resource:

@FOX That does work for headers that change, but it doesn’t show it at all in the scrollable content. It is a good approach for some cases.

We need this feature please Figma!

4 Likes

There are tricks to achieve it (mouse enter zone at a certain point of scroll for instance) but it’s still kind of hacky and hard to give to a user to test. Would love this feature !

4 Likes

We need it feature 100% Figma! We need all modern css visual editor features))

13 Likes

Yes, yes! Need this feature yesterday for sub menus… Need to prototype a fixed position submenu that appears on ‘scroll down/swipe up’ and that disappears on ‘scroll up/swipe down.’ Make sense?

6 Likes

Agreed!

1 Like

Yes, I need this RIGHT NOW. Exactly this.

5 Likes

We can’t even prototype the forum page we are reading this request on without this feature. :wink:

49 Likes

Thanks so much, this hack works perfectly for my use-case too! :clap:

1 Like

So need this feature!!!

2 Likes

Can you please share how you did this? I think it works great to get the point accross. I see you share the prototype but can you tell me the steps, appreciate it!!

1 Like

@Emilio_Iantorno At the moment it is not possible to prototype fixed position / sticky elements. That is why we are suggesting that it be added as a feature. Please vote for the feature at the top to help Figma know that we want this feature added.

If you weren’t talking about the main post, please tag or mention the user name to let us know who you are talking to.

4 Likes

You can duplicate the file to see how it works.

1 Like

Loved this one!!! for all people asking how to do this, just copy this file to your drafts and go to open in editor. There you may see how the Prototype was animated.

1 Like

Thanks for the idea! It doesn’t seem to work on Figma Mirror but it works perfectly in web!

2 Likes

Would love to have this feature added to an upcoming release. Please Figma !

6 Likes