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

Forum|Forum|5 years ago
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!

Share an idea

Show previous replies

Chad_Lavimoniere

Please give us this! As a combo designer/developer, the inability to model many parts of CSS in figma is a ceiling I bump my head against a lot. When I’m designing for the web I’m thinking about what’s possible on the web, but I can only create figma files with what’s possible to do with figma. If the set of things that figma can do is a subset of the things that are possible to do with CSS, then designers using figma are handicapped by their tools.

JB1

Please oh please oh please

Wong_Chung_Kam

Yes please I need this scroll to stick…

Corinne_Prainito

You are a legend! Thank you this works perfectly for me too

Jamo

+1 here. This feature would be essential because this technique is getting more and more common on modern pages, even including this forum 😉

The CSS property for this feature is position: sticky;.
I think the settngs for this feature could be implemented in the “Constraints” section of the element settings.

www.figma.com_file_AcwChGvAaRdi9npeGooPwg_Landingpage_node-id=1:2 (1)

Usually you also define a top margin when using this in CSS. But that’s not as essential as the sticky position itself in my opinion. We would be really grateful if we would at least have the option to make objects position: sticky; top: 0;

Cheers.

@figma @anon21722796

martin4

Awesome workaround. Thank you!

c111

You can mimic this sticky header component by nesting vertical scroll. Not perfect worflow, but almost mimic the sticky feature.

First, make the main frame (A) which is vertical scrollable.
Second, Create body component (B) which is also vertical scrollable.
Create sticky header element (C) inside of B. C should be fixed position.
Create body instance (B’) and position it at the bottom of A.
The height of body instance (B’) should be equal to the height of the screen.

Example
Prototype : https://www.figma.com/proto/GqmRturtjyQuqD0WMpNkmZ/Sticky-Element-Example?page-id=0%3A1&node-id=2%3A70&viewport=-573%2C442%2C0.5652116537094116&scaling=min-zoom&starting-point-node-id=2%3A70
Figma : https://www.figma.com/file/GqmRturtjyQuqD0WMpNkmZ/Sticky-Element-Example?node-id=0%3A1

When scrolling, mouse cursor position is important to determine which frame should scroll now. When you want to scroll up when the scroll hit the bottom, move mouse cursor off the screen and wheel your mouse.