How to make the Footer Sticky & Header

Ask the community
1

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

2

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.

image

I believe I have answered your query. If not please let me know. I will try to make it clear.

2 Likes
3

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 :slight_smile:

1 Like
4

I would suggest a more scalable and up to date way to do it via auto-layout.

  • Your main frame is auto layout
  • Your content frame is set to fixed height and vertical scroll in on
  • Make sure your content is taller than the frame height.

In this approach you can use auto-layout way better and have better scroll smoothness. That’s how I do it anyway

15 Likes
6

I am glad that it helps you out.

1 Like
7

This is so helpful! Thank you so much!

8

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 :sob:. 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 :persevere:

Hope somebody can help me figure this out. Thanx a mill :hibiscus:

1 Like
9

Thank you!!!

10

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!

11

Thank you!!!

12

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.

13

Thank you Edward for sharing, It works for me.

14

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

15

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