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

Greg5
December 14, 2021

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!!!

JJ1
January 24, 2022

Yes and yesterday! I needed this years ago and very much still do today…
Please and thanks.

Tarik
New Member
January 28, 2022

design tools built on actual web renderer

Do you know any?

mattaningram
New Participant
January 28, 2022

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.

Hunter_Wilhelm
January 28, 2022

I might actually switch from Figma if these other platforms have the sticky feature. Others should too.

Param_Patel
February 1, 2022

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.

rnwicaksono
February 1, 2022

Yessss! I know Figma can do it! Go Figma!

Goncalo_Barros
February 2, 2022

Yes please Figma! I need this feature to do my school work! You can do it Figma! 🙏

Prouvost_Nicolas
New Participant
February 14, 2022

That is missing indeed, and would be very useful, please!!!

Thanks in advance

IraX
Power Member
February 14, 2022

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).

scroll-fixed-prototype

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