Skip to main content
Derek0101
Derek0101
Participant
August 14, 2020
Answered

vertical scrolling of content "under" opaque headers and footers (ala Instagram)?

  • August 14, 2020
  • 2 replies
  • 628 views

I am trying to vertically scroll content "under" fixed position header and footer, but I continue to "see" my content through the header and footer as it scrolls.  Essentially, I need the content to arise from the top of the footer and disappear under the bottom of the header (like Instagram).  Any ideas for a beginning XD user?

This topic has been closed for replies.
Correct answer Spas K.

Here's how to set it up. Basically, your header and footer should be above everything else in the layers panel, and they should have a white bar as a background, to cover everything. Also, their respective group should have the "Fix Position When Scrolling" on the right enabled.

 

 

Here's the prototype: https://xd.adobe.com/view/7131e4c8-4020-42d9-a30c-146272276ccb-2462/

 

Cheers!

 

2 replies

Spas K.
Community Expert
Spas K.Community ExpertCorrect answer
Community Expert
August 18, 2020

Here's how to set it up. Basically, your header and footer should be above everything else in the layers panel, and they should have a white bar as a background, to cover everything. Also, their respective group should have the "Fix Position When Scrolling" on the right enabled.

 

 

Here's the prototype: https://xd.adobe.com/view/7131e4c8-4020-42d9-a30c-146272276ccb-2462/

 

Cheers!

 

    Derek0101
    Derek0101Author
    Participant
    August 21, 2020

    Worked beautifully! Thanks for the help!

      Harshika Verma
      Community Manager
      Harshika VermaCommunity Manager
      Community Manager
      August 17, 2020

      Hi there,

       

      Sorry to hear you are having trouble with vertical scroll in XD. Would you mind sharing the screenshot of your prototype mode showing all the interactions of your design for better understanding?

       

      We will try our best to help.

       

      Thanks,

      Harshika

      Derek0101
      Derek0101Author
      Participant
      August 18, 2020

      Hi Harshika

      Thanks for your reply.  I would prefer to share my prototype privately and not in the entire community.  Is that possible?

       

      Thanks

      Derek

      Harshika Verma
      Community Manager
      Harshika VermaCommunity Manager
      Community Manager
      August 18, 2020

      Yes. You can share the screenshot and the link with me over a private message. I would also suggest to take a look at Spas K suggestion and share the results with us.

       

      Note: Please add the URL of this post over a PM for reference.

       

      Thanks,

      Harshika

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices