Sticky Header on Scroll! Figma Update 2023 

Such a helpful no-frills video. Thank you for sharing!

I just happen to come across this and legit never knew about canvas stacking settings... Crazy that it's not 'First on top' is not defaulted... Thanks for the video, it just saved me so much trouble.

OMG OMG, the tip about canvas stacking saved my project! I was searching like a crazy, but didn't found in anyplace the answer, I'm emotional kkk THANK YOU!

super helpful! thanks a lot!

Thanks for this. I can't believe how hacky it is to do after Figma were so excited to show us this. Thanks again

Thank you very much!

That last bit about its limitations is a real bummer. I'm trying to make a sticky menu bar with category labels + icons that grow when users scroll down to designated spaces. Unless there is an alternative to trigger the varient's states, I guess I will have to bloat my file with multiple screens just for this minor effect.

Thank you sooooo much!!! I was very tired finding a solution to make this example for the content of a dashboard and the fact is that i much prefer auto-layout (i am developer and i use flexbox css and a single frame doesn't cover what i needed... figma should think more in the workflow of CSS less than compare to other existing products... and also web designers should be familiarized with css like you, as i think...) It´s so disgusting only to find examples using simple frames that doesn't change their width when using variants of, in my case the sidebar collapsing-expanding As you say, without auto-layout is easier. But if you know about CSS rules, you will find-out that when you change to position absolute the menu it's the same that in CSS... So, the problem is not so much about how difficult it is to do things with autolayout, but rather about knowing CSS. THANK YOU DARREN

Thanks a lot this was helpful, and your design is gorgeous 😊

That moment when you typed a minus figure into the height box! 😁

Amazing thankyou may crack many more

Thanks! Really appreciate this vid (just subscribed). Been trying to hack it for an hour. But clearly it’s still quite limited especially regarding the order they need to be in

Hey Darren, do you know how to stop a sticky element at a certain point on the page? This is in the context of an in-page container or heading that needs to stop before coming into the next section.

Thanks a lot for showing us not just one way but different alternatives to a solution! I have a quick question. What tool are you using to screen record your tutorials? I like how neat and consistent the look of all your tutorials is. 🤓💯👍

Thank you for the helpful tips. I'll try this with a nav bar. If the nav bar is fixed I want to extend another sub-menu. But then the content above the nav bar is shown again. The sticky effect is then canceled again 🙈Hope you understand what I mean :-)

Try doing it with the sticky google chrome header. I tried it doing in mobile but I am unable to do two sticky header on top. Do you have any solution for it?