Hello,
I’m working on a prototype and would like to use Figma, but I have no idea how to make the Footer Sticky along with the Header Sticky on scroll. I can fix the position of the header, but when I try to make the footer sticky “clicking the Fix position when scrolling” it does not show-up in my prototype.
Anyone have experience with this?
Thanks
ron
Along with making the Position fixed, you have to play and maintain the constraints. If it’s a header you have to make the constraints top to either “Center” or “Left and Right” and click the bottom constraints. Same for the header except mark on the “top” instead of “bottom”.
Second thing to consider is that, The footer layer should be group into frame. Group does not work.
I believe I have answered your query. If not please let me know. I will try to make it clear.
Hi Thapa,
Thanks that worked out! I struggled to find an answer w/o asking to the community directly. I will be able to solve my problem now 
I would suggest a more scalable and up to date way to do it via auto-layout.
fixed height and vertical scroll in on
In this approach you can use auto-layout way better and have better scroll smoothness. That’s how I do it anyway
I am glad that it helps you out.
This is so helpful! Thank you so much!
Hey first of all a huge thank you @Edward_Battistini for posting this video and explenation! But - very sorry but I don’t quite get this to work 
. Is there any way this could be explained more in detail? I am having difficulties setting up the content frame, and am not able to make it work 
Hope somebody can help me figure this out. Thanx a mill 
Thank you!!!
Hi Ron,
I would like to know how did you make that sticky header effect. Do you have a tutorial to show me how to create a sticky header on Figma? I will appreciate it.
Tks!
Thank you!!!
Hello everyone! I know the topic is already solved, but I would recommend another way to solve this issue.
The solution @Edward_Battistini suggested gives you the same result, but something that bothers me while working in Figma is going back and forth editing a content block with clip content activated.
I would recommend to keep working with auto layout, as suggested, but setting your footer in absolute position, aligning it to the bottom of your main frame (Alt+S) and then setting it to fixed position in the prototype tab.
You can see how this works here: Create A Fixed / Sticky Bottom Nav Bar That Animates Between Screens - Figma Tutorial - YouTube
For the top bar issue, I would recommend the sticky (stop at top edge) setting in the prototype bar. I guess it wasn’t available by the time this topic was solved.
Thank you Edward for sharing, It works for me.
The solution @Edward_Battistini suggested gives you the same result, but something that bothers me while working in Figma is going back and forth editing a content block with clip content activated.
To address this one I make a component for the whole screen and use an instance for presentation/prototyping. This way I can keep original design full height and use the instance for everything else
Your solution is not sticky - it’s fixed.
I think, this is still not possible in Figma.
Here is a CSS example: Positon Sticky to Bottom (codepen.io)
CSS Position Sticky - How It Really Works! | by Elad Shechter | Medium
I have found someone in Figma (props to her) making this possible, not sure if this would help but please feel free to check it out.
Would be great to just be able to set z-value. Also more in line with CSS way of working.