Sticky Header, New UI?

Hello,

I’m building a dashboard and need the header to be sticky on scroll. I have the side panel and footer working, but not the header? Is there nowhere to note fixed position in the new UI?

It should still be there, depending on what you’ve selected. On the right-hand side, go to “Prototype”, and you’ll find “Position” under “Scroll behavior”. You’ll find the familiar options there: fixed, sticky, scroll.

image

1 Like

Thank you! Maybe I’m doing something wrong. I’m selecting an instance of a component but the option to stay in place is grayed out. The component sits within autolayout frame and is hugging on height and fill on width

Ah yes, that’s because there are two types of “keep this in place while scrolling”.

  • Fixed: regardless of where you scroll to, always keep it in the same place.
  • Sticky: once you scroll past this component/object, keep it in the same place on screen.

Here’s the gotcha (same for both design and web development): Fixed is only available if the element is not nested in another element. Conversely, Sticky supports being nested. However, this means that one element will only follow your scrolling until it reaches the “end” of the parent element.

If you want “fixed”, then you should not nest this object into another one.

1 Like

Add absolute position to that instance to make fixed available, if it’s not nested in another frame

2 Likes

Randomly works as intended now. Things a little buggy as things get updated. But we good now hoorah!

Thank you. This makes sense and clears up the no fixed question! But sticky is still not making it the header stick, :slight_smile:

Oh wait. It randomly works now!!! Woohoo. Thanks again

1 Like