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

Forum|Forum|5 years ago
January 25, 2021
136 replies
101399 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!

Share an idea

mattaningram

New Participant

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.

Brian_Clay

Would love this!

Bruno_Figueiredo

New Participant

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.

FOX

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.

Hunter_Wilhelm

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!

Mathieu_Lajoinie

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 !

Oleg_Larkin_Designer

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

Bradford_Kuntscher

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?

bombadillo

Agreed!

bombadillo

Yes, I need this RIGHT NOW. Exactly this.

Show more replies

Sign up

Login with SSO

Login to the community

Login with SSO