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

Double check your constraints are set to the bottom. It fixed it for me.

You’re my hero - thank you!

@Mel5 Your fix worked! Thank you so much!

Detaching Instance from the parent component worked for me.

🤦‍♂️ 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.

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! 🙂

⭐ You’re a hero.

Thank you so much Mr genius. Works like magic

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.

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

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

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.

In order to see the “Fix Position When Scrolling” for particular element, say A, A should not be in any group, means A should be directly under the main frame.

Why does this persist even now?

I have a simple frame that acts as a bottom navbar on mobile.
Constraints: Left and Bottom. Fixed while scrolling: checked. Screen overflow scrolling: Vertical scrolling.

At one point it was visible. I pulled it out of the screen, changed the styling, added constraints, and everything, but not working. It’s weird and doesn’t make sense to me.

Does anyone have a new fix for this?

Okay so one thing that fixed it for me was to align the navigation bar to the bottom of the page, not place it at the end of the screen size.

Contrary to what I used to do and how other suggested it, but it’s what worked for now.

Just in case someone has the same problem. In my case the “fix position” didn’t appear because I had several frames of equal size overlayed, and as soon as I deleted a spare one - the option appeared. I don’t know why I create extra frames lol. To delete a spare frame - command shift G

Hey @Macky_Tanaka, thanks a bunch! It totally worked.

OMG I found a solution. It was really easy. Just “frame selection” your component and it’s fixed. XD Hope you guys doing well

I had the same issue with the bottom navigation bar and solved it by setting the constraints to the bottom.

Thanks, this solved my problem which was a silly one… was working on Android larger and the “proceed to pay” button spilled downward beyond 800 so yaa…thnx again

when I try to fix the navbar i cannot fix it

Hi, Alfred_Rufus. I have this problem too. I fix it by setting the frame’s scroll behavior first (setting the overflow to vertical, horizontal, or whatever you wish), and then it will allow you to set the layer’s scroll behavior to Fixed.