Figma Support Forum

Fixed Positioning Starting At Certain Scroll Depth

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!

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

3 Likes

Would love this!

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.

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

3 Likes