Skip to main content
New Participant
September 28, 2020
Answered

How to fix the position of header while scrolling

  • September 28, 2020
  • 3 replies
  • 3463 views

Hi everyone, I make a prototype in XD and when i scroll down I want the head of my page to move a bit and stop moving so that it doesn't disappear completely.

Is it possible? If yes how?

 

{Renamed By MOD}

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

Right now you can make a fixed header, but it will be fixed from the start. From what I understand you want it to become fixed after the page is scrolled a bit. There's no built in functionality for this, but there is sort of a workaround for it.

 

You can do this by making 2 versions of the header:

- One default version, when you are at the top of the page, that is not fixed.

- One "sticky" version, that is usually smaller and is fixed to the top of the page.

 

You can put the big header on top, so that it hides the smaller header. You can also use a cover rectangle that will cover the smaller header until it has to show up. On the smaller sticky header, you activate the "Fix position while scrolling" option on the right. This way the top header will scroll with the page, and the sticky header will show under it after you scroll.

 

I made an example in this thread for another user, you can check it out:

https://community.adobe.com/t5/adobe-xd/fixed-position-when-scrolling-until-a-certain-point/m-p/11467208?page=1#M37629

 

Hope that helps.

Cheers!

3 replies

New Participant
September 29, 2020

Thanks one more time Spas!

Your idea is the right one. I'll use it while maybe waiting for an update.

Thank you!

Cheers!

Spas K.
Spas K.Correct answer
Community Expert
September 29, 2020

Right now you can make a fixed header, but it will be fixed from the start. From what I understand you want it to become fixed after the page is scrolled a bit. There's no built in functionality for this, but there is sort of a workaround for it.

 

You can do this by making 2 versions of the header:

- One default version, when you are at the top of the page, that is not fixed.

- One "sticky" version, that is usually smaller and is fixed to the top of the page.

 

You can put the big header on top, so that it hides the smaller header. You can also use a cover rectangle that will cover the smaller header until it has to show up. On the smaller sticky header, you activate the "Fix position while scrolling" option on the right. This way the top header will scroll with the page, and the sticky header will show under it after you scroll.

 

I made an example in this thread for another user, you can check it out:

https://community.adobe.com/t5/adobe-xd/fixed-position-when-scrolling-until-a-certain-point/m-p/11467208?page=1#M37629

 

Hope that helps.

Cheers!

Rishabh_Tiwari
Community Manager
Community Manager
September 29, 2020

Hi there,

 

Thanks for reaching out. If I understood it correctly, you are looking to fix the header while scrolling? If yes, you can refer to this article: https://helpx.adobe.com/xd/help/create-scrollable-artboards.ug.html

 

Let us know if this helps or if you need any further assistance.

 

Regards

Rishabh

New Participant
September 29, 2020

Hi,

Thank you very much for your response, it was informative for me.

Actually my header is a bit too big and I want it to be fixed after the page has scrolled a bit so the top of the header can disappear.
Consider that it is made up of 3 lines, I want all lines to scroll with the page until the first two lines that are at the top disappear; the only remaining will therefore not be disturbing by its size.

Regards

Babacar