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

same here. Pls add this one! :slight_smile:

also it would be useful to swap frames at scroll (like at the beginning of the page there’a a header, and when you scroll you swap to a mini version of it)

Please add this feature in your prototypes. For navigations elements it would be key

1 Like

They have officially added this feature to Figma! Thank you!

  • Create “sticky objects” that stay in place at the top of the frame once you scroll past them
3 Likes

A post was merged into an existing topic: Improve the New Position Sticky Implementation

3 posts were merged into an existing topic: Improve the New Position Sticky Implementation

For any new feedback on this feature please refer to this new topic thread: Improve the New Position Sticky Implementation

Please, please, please…. Add “fixed position when scrolling” capability to items that have autolayout. OR, a native workaround to remedy the issue. The case that I run into on nearly every project is I will have a webpage that is set up to auto-expand with the content throughout the page. For example, accordion panel content and expanding sections that will change the overall document height as items are toggled on/open when in the prototype preview. This is great for more accurate client presentations to show the intended usage of the design. The trouble is when a client wants a sticky nav AKA “fixed position when scrolling” within that prototype, we have to do some pretty odd workarounds to make this viewing experience seem natural. Or we have to simply leave it static and reassure the client that the developed page will have the sticky nav fully functioning. Not ideal to ask the client to have a good imagination about how the end result will function.

22 Likes

Ah. So that’s why I can’t seem to find “fixed position when scrolling” no more in the side bar… it’s gone for auto-layout items. Bummer.

1 Like

Boosting this! Same use case as Original Poster but for a mobile app: I have a screen that I want to auto-expand to fit its contents as different accordion menus are expanded/collapsed BUT I still want the header and footer navs to be sticky to the top and bottom of the screen, respectively.

An additional ask would be to set a minimum frame height for the parent frame (screen) because when all of the accordion items are collapsed, the page contents don’t fill the length of a mobile screen.

4 Likes

I’m also working on a prototype where we have a full auto-layout page but still want a fixed-position navigation on top. I would like to know how can we do it since the auto-layout here is extremely important to have.
Maybe we could have floating elements that could be placed over the auto-layout without interfering with it - and these elements could have a fixed position or not, for more freedom.

2 Likes

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

1 Like

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

1 Like

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

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:

3 Likes

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.

1 Like

A post was merged into an existing topic: Improve the New Position Sticky Implementation

How to stop it from sticking at certain point?

6 Likes

Not sure if I’m seeing anyone have the issue I’m having. I can make a component stick at the top and stick at a certain point on the page but what I need is a component to stick to the bottom of the browser window. I test my designs with users and they have different mobile devices and screen sizes. I need the prototype to recognize the users screen size and stick to the bottom of their window. Does anyone have some hacky way to do this? I miss Axure RP.

Vertical offsets to sticky elements please - this is currently useless to me - when I have an android Status bar already fixed to the top of the screen (sticky element partially scrolls under the fixed element).

1 Like