Request details

Fixed elements in scrolling artboards (header, nav bar, etc.)

Since you already started with scrollable area inside artboard, it would be awesome if we could define sticky header. For example, one page website has a lot of content, but I want to create sticky header so when I scroll down, it stays at the top. Maybe you could add the option so we can define the group and assign the sticky header option to it. That way on any artboard we can just assign that option to it and that's it.

5,551 votes
Sign in
(thinking…)
Sign in with: Facebook Google
Signed in as (Sign out)

We’ll send you updates on this idea

Aleksandar Cucukovic shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →

Fixed elements are finally here!! We’re incredibly excited to announce that you can select any top-level element in your artboard and click “Fixed Position” to fix your element anywhere in the viewport.

To learn more about this feature, watch the video here: https://youtu.be/3fWBkV5S6U4

Please do continue to file and upvote issues in UserVoice – your voice really does make a difference!

-Elaine

973 comments

Sign in
(thinking…)
Sign in with: Facebook Google
Signed in as (Sign out)
Submitting...
  • David commented  ·   ·  Flag as inappropriate

    Please add this feature in the next update! Thank you guys!

  • Rio commented  ·   ·  Flag as inappropriate

    Many times apps have menu bars that stay fixed when the user scrolls. Please can we have a tool that lets us Pin or Fix objects so they do not scroll.

  • Dan commented  ·   ·  Flag as inappropriate

    Definitely a feature I need. We need to be able to add an anchor point to indicate when an element should become fixed.

    e.g. When you scroll past 250 height, button 2 becomes fixed at it's position at the top of the viewport.

  • NeeKer commented  ·   ·  Flag as inappropriate

    Hi Joan, when are we expecting the release of this feature? That will be awesome.

  • Kelly commented  ·   ·  Flag as inappropriate

    The ability to do a transition (ie. slide left/right) that only affects a portion of the screen and the frozen parts of the UI stay in place. For example, if I have a series of walkthrough screens, I only want the content view area to animate nothing above it (title bar) or below it (toolbar). So, if I have to horizontal movable bars, I can freeze everything above the top bar and everything below the bottom bar.

  • Ata Sanchez commented  ·   ·  Flag as inappropriate

    When a prototype is done, for example of an Android app and want to use the bottom navigation bar to perform the same scroll also moves with the rest of the interface. It would be a good idea to make more logical and consistent prototypes, to leave fixed elements on the interface.

  • David Herzog commented  ·   ·  Flag as inappropriate

    Really excited for this feature. How is is coming along? When do you expect to roll it out?

  • guigonzalez commented  ·   ·  Flag as inappropriate

    "Floating action buttons are used for a promoted action. They are distinguished by a circled icon floating above the UI and have motion behaviors that include morphing, launching, and a transferring anchor point."

    https://material.google.com/components/buttons-floating-action-button.html

    At various times, when designing an interface, we have elements that need to be floating on the other elements and fixed on the screen, regardless of scrolling.

  • Cesar Leal commented  ·   ·  Flag as inappropriate

    Block items (as menus) when scrolling. Like block side menú and let up/down scroll all the other items.

  • Manish Shah commented  ·   ·  Flag as inappropriate

    Pinning UI object will allow fixing position of a single or group of elements.

    This will help designers to articulate ideas like static header, side panels, etc into the prototype.

    Link to the prototype.
    http://adobe.ly/28UDXqv

  • Albert Ellenich commented  ·   ·  Flag as inappropriate

    That's great Joan! Sounds like a feature we could use to freeze our header and footer navigation items when designing mobile apps too.

  • Tom commented  ·   ·  Flag as inappropriate

    Essential!!!
    Sticky header, footer, or any object (group).

    Don't forget the option to declare "during scrolling state". For example, does it drop shadow, adds a border or whatever.

  • Tom commented  ·   ·  Flag as inappropriate

    Fully agree, otherwise, for demoing/prototyping, the scroll has little use (sure, still for the designing though)

  • George P. commented  ·   ·  Flag as inappropriate

    This is pretty much essential for most mobile prototypes. Hopefully this will be in the next release.

  • Robbert commented  ·   ·  Flag as inappropriate

    I would very much like a "my design begins under the status bar" like seen in Invisionapp.

  • Steve Holmes commented  ·   ·  Flag as inappropriate

    This would be nicely combined with Layers if possible, so that header and footer items could (if desired) be put onto upper layers, to avoid selection issues between scrolling and sticky elements.

  • Liam commented  ·   ·  Flag as inappropriate

    I agree this is fantastic! I also feel that collapsing navigation is the next logical progression from this, though.

    Perhaps it is entirely separate (?), but it is something terribly important and an area that every other application in the UI/UX environment is failing on.

    Full height navigation > scroll a bit > Reduced size / collapsed height navigation.

    Another iteration of this is:

    Full nav > scroll down = nav hidden > scroll up = nav revealed. (BBC News App springs to mind in the UK).

    Many thanks :-)

  • Adam Hartlaub commented  ·   ·  Flag as inappropriate

    This is great! I was just testing out the scrollable artboards for a website I'm working on, and I was thinking "Man, it'd be nice to have a sticky footer for the mobile nav to be fixed at the bottom".

    Totally do this! Thanks for all the hard work and UX research you are putting into this Adobe!! :)

  • Pablo Sara commented  ·   ·  Flag as inappropriate

    Oh, this is so great! Just make it very simple and generic, as property of a symbol itself?
    I imagine creating a symbol and right there on the inspector some checkbox with "doesn't scroll" or "locked position in prototype", something like that.

Feedback and Knowledge Base