Fixed position when scrolling + Autolayout (Sticky Nav)

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.


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.


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.

1 Like

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

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:



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.

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.