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

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

Show previous replies

Linda_Pham1

Any idea when this feature will be available?! Please please Figma =)

Lisa_Lessenger

Trying to do this now. Good to know its futile at this point.

Dave_Rowley

Bump. Same basic use cases as mentioned here. It’d be great if an entire master frame could obey autolayout rules but we could have elements (top or side nav) that fix when scrolling the entire view, and potentially have their own scroll views within them.

My specific case (beyond a sticky top nav), I want a main side nav to stick when scrolling, but it also has an “expanded” drawer state for subcategories that can either overlay the page content on hover, or can be activated to reflow the content view width and remain persistently available. Using interactive components and autolayout I can preview all the interactions on a single frame if I put the drawer in a horizontal autolayout frame with the page content. Clicking the default state of the drawer expands the drawer using smart animate and reflows the content that is to the R of it, but when I scroll the page down the drawer and content view have to scroll together. The desired behavior would be to have the drawer stick and the content scroll, and even to allow independent vertical scroll within the drawer (since it includes items like expandable filter groups that can increase the amount of content in the drawer and that the user may want to scroll through and select independent of their position in the content view).

tank666

This is currently available for absolute position objects in Auto Layout. An example file can be found at the link below:

UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank

Furqan_Ahmed

We are trying to fix the right/left vertical bar at a specific position but it seems there is no direct solution to achieve this with Figma at this point in time.
This feature is really needed. please Figma!

Constantin_de_Chaudenay

This feature is much needed, go go go Figma!

Adriana_Dela_Cruz

This would be really useful! @D-Edge hope you would be adding this as your new updates!

Schmidt_Joel_Pons_Joel_LPD

Seems like this would easy enough to develop - fixed position on scroll stops at a certain y-position on prototype scroll, and starts again when scrolling up. Come on guys, right now the fixed position feature is half-baked until you implement this, and it’s been 2 years.

Sien

Yep, been looking for that as well. It’s sad that it’s not available.

Dominic

Active Member

Here’s a band-aid solution that might help people. It’s super hacky and YMMV depending on finesse, screen size etc. But if you’re the one presenting a prototype, scroll as described and set dimensions accordingly, it can work-kinda. Sticky example is in 3rd section of the webpage:

Check notes on the file for context:

Figma – 16 Sep 22