Skip to main content

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!

You can pretty much achieve this by putting your element with fix positioning in a new frame that allows vertical scroll. Then you have 2 scroll areas. That allows you to show off and explain the effect. It worked for me.

Hey @stelios can you please explain this a bit further?

I think I found a good solution to your problem, but not sure if I understood your use case well.

Basically you can create a frame with auto layout, in it 3 frames:



  • header: fixed height

  • content:

    • fill container

    • but the content in it does not scale, takes as much space as it needs.

    • Check “Clip content”

    • in Prototype mode set “Vertical scrolling”



  • footer: fixed height


See my example file:

Figma

+1 - I used Aninix to solve the explained issue but the result - as great as it is - is a video.

The way Aninix lets you animate the elements on the page is how I know it from Principle. What’s missing there is a chance to link between elements/frames.


Come on Figmadobe!!

PLEASE ADD THIS.


This is so essential to prototype demos with sticky side navs and scrolling content. I need a left right expand collapse of a side nav while it also staying in place vertically and being able to scroll the content. You would not believe how may stakeholders have asked “is it going to actually do that?” when it doesn’t stay in place when I do my demos.

Could we have an update on this?

Yes! This would be super useful in many cases. Here’s another way someone could use this: RCA Programme finder. I think there’s no way to do this now…

There should be a way to assign where the fixed position would start and where it would stop in a specific frame.

Hey @Gleb Your solution sounds perfect! Can you please share a file in which the prototype works? I can’t figure out exactly how you solved this. Tried some settings but it doesn’t work for me. Thank you!

Gonna clarify again: this is not a solution, this is a suggestion of how things might work in Figma if they implement this feature. My prototype doesn’t function. It’s just an animated demo of the suggestion. There is no way to do a functional prototype like this in Figma currently.

@Gleb thank you for your answer. Ah ok understood! 🙂 Would be great this way!

Do you think this problem could be solved with a scroll event?



  1. I select a frame and take the link to another frame. I make sure the distance of the element I want to keep on the ceiling.


image



  1. I deploy the event selector and choose the new scroll event:


image



  1. I select the scroll event:


image



  1. I specify the event at which pixel of the total height I want the event to be triggered:


image

I migrated my design from Xd into Figma… only to find a function that I was able to do on Xd SO easily, and I cannot recreate it on Figma. 🤦‍♀️


+1 vote

let’s make it!

looking forward to this addition, it’s such an important feature to so many implementations these days!

I need this feature also, thanks

That’s why competition is so much needed in this industry.

Figma has the biggest market share so Figma folks don’t have the pressure to catch up to a competitor and this basically means they do not improve their features as quickly as we would like them to.

Many core features have flaws and features like this don’t exist yet despite being already implemented in competitors tools.

If Figma really wants people to switch to them they should reconsider the importance of improving on things their competitors may do better.

we want this plssssss

+1, our design team could really use this!

Figma team, please please please add this feature!

Yes ! Would love this feature @Figma_Support ! Let us know if you are working on it 🙂

The answer is NO, if you haven’t got the hint yet, peeps!

No way they need to add this feature real quick or i start developing on Adobe XD

I have found that communicating concepts to upper management is becoming increasingly difficult without this feature. Especially as more and more companies adopt such function.

typical figma user journey:



  • client requires a prototype that can demo basic functionality of a webpage

  • client requests prototype in figma

  • i end up on a forum page where users have been requesting the feature for several years

Where is this in the list of priorities?

Reply


Terms & ConditionsCookie settings