Skip to main content
Justin_Kalaskey
January 25, 2021

LAUNCHED: Elements now stick to the top when vertically scrolling in prototyping

  • January 25, 2021
  • 136 replies
  • 101434 views

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.

Zendesk scroll example

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!

136 replies

Beth_Flynn
November 15, 2021

Also desperately searching for this feature! I need it right now, today!

Colin3
November 18, 2021

Yes! this worked for me too—still a bit hacky with the scroll catching but good enough for a presentation. Thanks!

Jean-Philippe_Boulais
November 18, 2021

PLEAASSSE implement that feature

Matias_Fuentes
November 19, 2021

@FOX It’s incredibble, works good but i have an issue when i try to add links to the sticky bar, i’ts immposible any suggestion?

Benjamin_Risby
November 23, 2021

Is there really no response here from the Figma team itself? It’s one of the most requested features going and seems easy enough to implement.

Erell_Dubray
November 23, 2021

It would be so useful ! I’d like Figma implement this feature too.

Caroline_Collins
November 24, 2021

Please add this; it’s very useful and table stakes kind of functionality for prototyping. Thanks!

mattaningram
New Participant
November 24, 2021

I wouldn’t get your hopes up. Most of the top requested features here are HTML/CSS features that will be rather technically difficult for Figma to implement because Figma is built on a custom WebGL canvas renderer and not on HTML and CSS. Figma is well aware of these requests, but in conversations with them they have made it clear they don’t want to recreate all of HTML/CSS in the tool. They say it is because they want the tool to be for more than web design but in reality it is just too hard to do all of these features (I mean most of them apply to things other than just web design anyway).

In the future it is likely design tools built on actual web renderer will begin to sway web/product designers away from Figma as their UX catches up and more people learn about them because they have most of these top requested features available out of the box.

Marc_Hudson
December 2, 2021

I created this “sticky” feature in a jQuery plugin and not only is it important to state when to start being “sticky” and a top/left offset but also when to stop being “sticky” and at what offset (when you reach the footer of the bottom of the section, for example).

These parameters would cover most situations.

Please do tackle this Figma, it’s very useful.

jenny.cheuk
December 14, 2021

This is cool, but is there a way to scroll back up?