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.
Here is another example resource:
w3schools.com
@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!
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 !
We need it feature 100% Figma! We need all modern css visual editor features))
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?
Yes, I need this RIGHT NOW. Exactly this.
We can’t even prototype the forum page we are reading this request on without this feature. 😉
Thanks so much, this hack works perfectly for my use-case too! 👏
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.
You can duplicate the file to see how it works.
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.
Thanks for the idea! It doesn’t seem to work on Figma Mirror but it works perfectly in web!
Would love to have this feature added to an upcoming release. Please Figma !
I didn’t quite work for me 😦
Please give us this! As a combo designer/developer, the inability to model many parts of CSS in figma is a ceiling I bump my head against a lot. When I’m designing for the web I’m thinking about what’s possible on the web, but I can only create figma files with what’s possible to do with figma. If the set of things that figma can do is a subset of the things that are possible to do with CSS, then designers using figma are handicapped by their tools.
Please oh please oh please
Yes please I need this scroll to stick…
You are a legend! Thank you this works perfectly for me too
+1 here. This feature would be essential because this technique is getting more and more common on modern pages, even including this forum 😉
The CSS property for this feature is position: sticky;.
I think the settngs for this feature could be implemented in the “Constraints” section of the element settings.
Usually you also define a top margin when using this in CSS. But that’s not as essential as the sticky position itself in my opinion. We would be really grateful if we would at least have the option to make objects position: sticky; top: 0;
Cheers.
@figma @anon21722796
