Skip to main content
Justin_Kalaskey
January 25, 2021

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

  • January 25, 2021
  • 136 replies
  • 101434 views

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!

136 replies

Corey_Pruitt
New Member
May 18, 2021

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

Renata-Adrienn
May 21, 2021

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

Marina.Litvin
May 27, 2021

So need this feature!!!

Emilio_Iantorno
May 28, 2021

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!!

Hunter_Wilhelm
May 28, 2021

@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.

tank666
May 28, 2021

You can duplicate the file to see how it works.

UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank
Gisele_Bermudez
June 1, 2021

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.

Emma_Zhou
June 15, 2021

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

Julien_Chatelain
June 25, 2021

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

UX_Team_Afya
June 29, 2021

I didn’t quite work for me 😦