Highlighted

"Fix position when scrolling" items disappear when viewed as a prototype

New Here ,
Oct 08, 2020

Copy link to clipboard

Copied

I'm need help!

 

I'm trying to create the simplest of prototypes and the one key aspects is the need to display 2 fixed items on a long scrolling page. No matter what I try I cannot get my elements to appear in the prototype as fixed elements.

 

See attached screen recording.

 

What am I missing? Why are these elements completely disapearing when viewed as a prototype?

 

Thanks for your help!

Adobe Community Professional
Correct answer by Spas K. | Adobe Community Professional

Hello Sarah.

 

The issue is that your elements are below the viewport (the dashed line), so when you fix them in place, they stay there and never come up when you scroll.

 

Currently, the functionality for an element to become fixed after you scroll the page isn't available. It's either fixed in place wherever it is on the artboard, or it scrolls with the rest of the elements.

 

Here's a workaround you might be able to apply with some caveats.

Basically, you make 2 versions of said elements, one that's fixed, and one that scrolls with the page. You use a cover with the same color as the background, that sits between scrollable elements within view, and the fixed elements at the place where they will "stick" to the page.

 

Quick demo with a prototype:
https://xd.adobe.com/view/096a929f-d848-435d-ac9d-259dbb552b43-5c39/

I made the cover a slightly different color in the second screen, so you can see it.

 

And here's the file, so you can see how it's set up:
https://www.dropbox.com/s/4ly9nnlxaymrx69/Fixed_Scroll_demo.xd?dl=0

 

Hope this helps. For now, it's the only solution.

Cheers!

Views

82

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

"Fix position when scrolling" items disappear when viewed as a prototype

New Here ,
Oct 08, 2020

Copy link to clipboard

Copied

I'm need help!

 

I'm trying to create the simplest of prototypes and the one key aspects is the need to display 2 fixed items on a long scrolling page. No matter what I try I cannot get my elements to appear in the prototype as fixed elements.

 

See attached screen recording.

 

What am I missing? Why are these elements completely disapearing when viewed as a prototype?

 

Thanks for your help!

Adobe Community Professional
Correct answer by Spas K. | Adobe Community Professional

Hello Sarah.

 

The issue is that your elements are below the viewport (the dashed line), so when you fix them in place, they stay there and never come up when you scroll.

 

Currently, the functionality for an element to become fixed after you scroll the page isn't available. It's either fixed in place wherever it is on the artboard, or it scrolls with the rest of the elements.

 

Here's a workaround you might be able to apply with some caveats.

Basically, you make 2 versions of said elements, one that's fixed, and one that scrolls with the page. You use a cover with the same color as the background, that sits between scrollable elements within view, and the fixed elements at the place where they will "stick" to the page.

 

Quick demo with a prototype:
https://xd.adobe.com/view/096a929f-d848-435d-ac9d-259dbb552b43-5c39/

I made the cover a slightly different color in the second screen, so you can see it.

 

And here's the file, so you can see how it's set up:
https://www.dropbox.com/s/4ly9nnlxaymrx69/Fixed_Scroll_demo.xd?dl=0

 

Hope this helps. For now, it's the only solution.

Cheers!

Views

83

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 08, 2020 0
Adobe Community Professional ,
Oct 08, 2020

Copy link to clipboard

Copied

Hello Sarah.

 

The issue is that your elements are below the viewport (the dashed line), so when you fix them in place, they stay there and never come up when you scroll.

 

Currently, the functionality for an element to become fixed after you scroll the page isn't available. It's either fixed in place wherever it is on the artboard, or it scrolls with the rest of the elements.

 

Here's a workaround you might be able to apply with some caveats.

Basically, you make 2 versions of said elements, one that's fixed, and one that scrolls with the page. You use a cover with the same color as the background, that sits between scrollable elements within view, and the fixed elements at the place where they will "stick" to the page.

 

Quick demo with a prototype:
https://xd.adobe.com/view/096a929f-d848-435d-ac9d-259dbb552b43-5c39/

I made the cover a slightly different color in the second screen, so you can see it.

 

And here's the file, so you can see how it's set up:
https://www.dropbox.com/s/4ly9nnlxaymrx69/Fixed_Scroll_demo.xd?dl=0

 

Hope this helps. For now, it's the only solution.

Cheers!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 08, 2020 2
New Here ,
Oct 09, 2020

Copy link to clipboard

Copied

THANK YOU!

Now I understand.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 09, 2020 0