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