"Fix Position When Scrolling" not working as part of a component instance

Thank you so much! :raised_hands:

I had a similar issue. Not with a component, but just with a basic frame. It looks like the “Fix position when scrolling” checkbox doesn’t appear if the parent frame has an Auto layout on it? Would love confirmation from someone from Figma.

2 Likes

Hi @Tamara_Didenko, could you show the layers panel and indicate which layer you select?

Oh my god. I spent hours trying to figure this out for my anchor navigation component.

Scroll to doesn’t work with components (except the master component) at all, and additionally if you are trying to smart animate it doesn’t work both ways. [The first way works as it’s the master, but not the reverse e.g. a drop down list demo will open but not shut]

My hack fix was to detach the anchor link nav instance on the second page and in another more complex component just overlaid a transparent button.

I really hope this gets fixed because both those solutions are temporary and i can’t have multiple pages of detached components.

1 Like

@tank666 I’m having the same issue. I’m trying to make the heading fixed yet I can’t figure out how to do it when the parent frame / component has auto layout. Here’s an example file and screenshot of the selected layer (below). Any input would be appreciated.

THANK YOU, this one works for me!

Overflow scrolling for my screen prototype set to vertical
My sticky navbar i set to fixed positions then set the constraint to left bottom

October 3rd, 2021

3 Likes

Double check your constraints are set to the bottom. It fixed it for me.Screen Shot 2021-10-09 at 13.29.44

7 Likes

You’re my hero - thank you!

1 Like

@Mel5 Your fix worked! Thank you so much!

Detaching Instance from the parent component worked for me.

1 Like

:man_facepalming: You LEGEND!

When an interactive component doesen’t works or has bugs try to put it inside another frame and make it fixed, the component will work perfectly as fixed element.

1 Like

This was the fix that worked for me!

Re: trying to set “fix position when scrolling” for component instances – also make sure that your component instance is not grouped together with any other objects that are scrollable (this will cause fixed scrolling to break). Keep all the objects you want fixed ungrouped (or in a separate group) from anything else in the frame, and this solved the issue for me (the “fix position when scrolling” option is available for all component instances, and prototype behaviour works as expected). Hope this helps someone! :slight_smile:

1 Like

:star: You’re a hero.

1 Like

Thank you so much Mr genius. Works like magic

1 Like

Just came across this as I need to do the same. From what I read if you want a static header it has to be outside the Auto-layout, right?

But if I cannot set Auto-layout on the outermost frame, how do I set the frame to auto-resize? If I set the outermost frame (or “artboard”) to auto-layout and vertical sizing to “hug”, it will resize to contain all elements. If for example I have a lot of accordions, I need the page to resize, so that I can scroll correctly in the prototype.

So my question: How can I have an auto-resizing outer frame with a static menu on top?

Apply absolute positioning to the object and then adjust the constraints and the “Fix position when scrolling” setting.

1 Like

Okay, wow, it took me a while to find it and I have been using Figma for ages. For anyone else, it’s here:

image

Also you will have to set basically a top margin for everything below your menu, which you can do here:

image

Thanks @tank666

It did for me. Selecting Left and Bottom in the constraints, as suggested in above comments, only served to dislocate my vertical navi bar to the right while also not fixing the scrollability issue. The real problem was that the navi bar in the varient frame was grouped in with several other assets which denied the “fix to position when scrolling” from even being clickable.

1 Like