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.
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!
Steve Holmes commented
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.
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
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
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.
Yes! Please make this feature ASAP... Please!
Pablo Sara commented
I want to be able to only scroll only the content but not the top navigation bar or the objects I specify.
If symbols are introduced, this could be a property for a symbol ("Prevent scrolling in prototype" or "locked position in prototype"
Maybe an inverted solution could also work: we could define a viewport for each canvas (by default is the whole canvas) and the scrolling/panning of content could happen only inside it.
Sorry if I'm missing something!
Agreed! Sticky element are a most for most designs.
Please make this feature, ASAP. We are truly Adobe xD users who really need this.
Manuel Ryan Espinosa commented
I have to do it. Yahoooooooo oooohhhh oooooohh oooooh !!!!!!
Sylvester Aryee commented
I believe this post might have been edited to be a bit too specific. In my case, sticky elements (fixed elements) could include anything from headers/navigation) to notices, footer bars, 'back-to-top' buttons etc. And not limited to headers.
Joel Cory commented
I would like to have support for fixed side nav, as well as fixed header, footers. There were different requests for the header and footer, but it seems to be the same feature to me.
Philippe Schott commented
It would be great to be able to define elements or groups of elements as sticky (to browser top/bottom/left side/right side) in order to create sticky navigation or boxes (for feedback/chat/next-best-actions for example). It would also be great to be able to define when the elements or groups of elements should be sticky and when not, e.g. a sticky navigation placed below a stage at y 500 should only be sticky, when scrolled down below y 500.
In the prototype, when implementing the ability to scroll content or even non scrolling screens, the designer should be able to lock the area from not scrolling out of the screen view.
Sylvester Aryee commented
I can't tell you how many times I've had to tell a client "This scrolls with the page".
If this was integrated in the prototype mode, where you could just right click and select "Fixed element" or something, that would be great.
Ability to identify mobile elements such status bar, navigation bar both the top and bottom.
This will be very helpful when creating in a longer canvas with detailed designs, if we can set them fixed to a specific area while interacting (scrolling) with it. We could better design the experience.
Being able to have the navigation bar scroll down the page with you or an alternative nav.
Cris Lindner commented
Hi, It would be great to have some "fixe this object" tool during a transition. to set fixed menus , light boxes or modals.