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

Orla_Hjort

Thank you - I had to frame 80 % of my layout to get a “buy ticket box” to stick. Can’t figure out why the ‘Fixed when scrolling’ is not possible inside a frame!?

Craig_Johnson

I wasted hours last week to try and figure this out.

my issue/need is the able have the original nav/header still visible and a second component/block lock in underneath that when it reaches it.

going to deconstruct some of the examples and see what I can do. thank team.

@figma be a great feature. Upvoted.

Ellie3

I’d really like to be able to make objects sticky at a certain point of the scroll - for example a sticky tab menu. I don’t want it to be fixed all the time, just once the scroll reaches X point (like how the sticky letter section titles work on the iOS contact list). At the moment it seems you can only fix an asset to a certain point on the page as ‘fixed’, rather than make the asset stick to that point once you scroll there.

Anybody else have any solutions to creating something like this prototyping in Figma?

Aleksandr_Kolesnikov

+1 would love to have this feature as I use sticky progress bars.

Gleb

Power Member

I just realized that position: sticky equivalent would be possible to implement without adding any new UI into Figma. Just by using the “Fix position when scrolling” checkbox and some extra logic. Inspired by this post: "Auto Layout" elements have no "Fix position when scrolling"

Let’s say we want to make this image in the article sticky, 60px from the top of the screen. To do that, place the image into the frame. This frame will limit the scrolling of the image. And the position of the image and its constraints will determine relative to where it gets stopped.

File to play with: https://figma.fun/hcua2Z

Let me know what you think about this concept!

Matej_Hlavacek

New Participant

I need it too ✌🏼

Hunter_Wilhelm

@Gleb That is a wonderful example! This should be used as an example to make it a feature. Even though this is great, it is not practical because it requires making multiple frames of the same content with minor changes. This means that if we need to change the original frame, then our work increases by 5 times. And if we had two sticky elements? 5x5 = 25 frames. It doesn’t scale very well. Figma, we still need sticky from css.

Gleb

Power Member

My demo is composed of five frames just to show the animation. The suggestion itself (if implemented by Figma) doesn’t require any duplication.