Currently the only function of fixed positioning on an element is to make it persistent in the same spot at all times. While this is useful the majority of the time, there are instances where it would be helpful to have an element become fixed when it scrolls into view or reaches the top of the screen.
For example, there could be a web page that has a secondary navigation below the hero that will become fixed when it reaches the top of the screen and be persistent for the rest of the scroll depth. Then when a user scrolls back up, the element releases from the fixed position when it reaches its original position. You can see this in effect on this page: Develop custom experiences with the Zendesk Platform | Zendesk Sunshine. It could also be used in more advanced manners such as multi-level parallax scrolling.
This would be very helpful for both engineering and stakeholders to understand functionality, especially when the designer isn’t there to describe it to them. It would also prove useful for user testing to understand if a chosen function works for users prior to spending time in engineering.
Does anyone have any other solution to this that I’m missing?
Thank you in advance and looking forward to hearing back!
Great trick!!! I´ve been all day trying to accomplish a very close use case. it is not what i needed. (because an element already in the viewport should change to sticky), but I made some changes and it does the trick for explaining the experience for the user. Thank you!!!
Yes and yesterday! I needed this years ago and very much still do today…
Please and thanks.
design tools built on actual web renderer
Do you know any?
Check out https://www.plasmic.app/ and in the future when it comes out of beta maybe https://www.modulz.app/
I tried Framer and it was way too limited and over-reliant on React to do anything beyond the basics.
I might actually switch from Figma if these other platforms have the sticky feature. Others should too.
This feature is a must! I hope Figma look to get this feature on there soon. Can’t see why it can’t be done. Most of the sticky aspects are there, it just requires a beginning and end positioning as constraints.
Yessss! I know Figma can do it! Go Figma!
Yes please Figma! I need this feature to do my school work! You can do it Figma! 🙏
That is missing indeed, and would be very useful, please!!!
Thanks in advance
We all know that these methods are hacky and ultimately yield decreased usability, which may or may not actually occur by chance if you weren’t driving the prototype yourself (e.g. testing). That being said, there is still a simpler way to produce a fixed-position element at a certain scroll position, and more importantly with a single frame as an overlay that can be reused for any other frame (I say this because I have seen Mouse enter/Mouse leave methods that required a connection to a duplicate frame, and double content to maintain is just… no).
I have one shape in a scrolling frame, positioned where (when) I want the fixed element to display. Unfortunately it is still based on hovering (so mobile testing in the app is out). The “While hovering” interaction gives you two states in one (on and off), so that is set to “Open overlay”. Still not perfect, but easy to do and maintain.
Figma – 20 Feb 22
Thanks for the explanation. The odd bit to this method is that it does not work with frames with transparencies or blurs.
I’m not sure what you mean. It’s just a 0% opacity layer that scrolls in and out of view. No sibling or parent frames with transparency or blur affect it.
I’d really love to have a sticky feature. ❤️ 🙏
Automatically stuck to the bottom of the screen would be very cool.
So are we getting this feature or what? This would be super handy to make the prototype experience more realistic. Also, it will be just a matter of time until the competition offers something like this.
Worked like a charm. Thanks for sharing!
Please, please, please…. Add “fixed position when scrolling” capability to items that have autolayout. OR, a native workaround to remedy the issue. The case that I run into on nearly every project is I will have a webpage that is set up to auto-expand with the content throughout the page. For example, accordion panel content and expanding sections that will change the overall document height as items are toggled on/open when in the prototype preview. This is great for more accurate client presentations to show the intended usage of the design. The trouble is when a client wants a sticky nav AKA “fixed position when scrolling” within that prototype, we have to do some pretty odd workarounds to make this viewing experience seem natural. Or we have to simply leave it static and reassure the client that the developed page will have the sticky nav fully functioning. Not ideal to ask the client to have a good imagination about how the end result will function.
This defenitely should be in Figma. Seems to be easy to implement.
Yes please @figma treat us with some ‘position: sticky; top: 0;’ 🥰
Yes!! Thank you so much this is a great workaround.
Ah. So that’s why I can’t seem to find “fixed position when scrolling” no more in the side bar… it’s gone for auto-layout items. Bummer.
Boosting this! Same use case as Original Poster but for a mobile app: I have a screen that I want to auto-expand to fit its contents as different accordion menus are expanded/collapsed BUT I still want the header and footer navs to be sticky to the top and bottom of the screen, respectively.
An additional ask would be to set a minimum frame height for the parent frame (screen) because when all of the accordion items are collapsed, the page contents don’t fill the length of a mobile screen.
