• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

New Here ,
Oct 08, 2020 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!

Views

4.3K

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
community guidelines

correct answers 1 Correct answer

Community Expert , Oct 08, 2020 Oct 08, 2020

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

...

Votes

Translate

Translate
Community Expert ,
Oct 08, 2020 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!

Votes

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
community guidelines
New Here ,
Oct 09, 2020 Oct 09, 2020

Copy link to clipboard

Copied

LATEST

THANK YOU!

Now I understand.

Votes

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
community guidelines