Skip to main content
Participant
Sep 28, 2020 9:14 PM UTC
Answered

How to fix the position of header while scrolling

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 is closed to new replies. Start a new post to keep the conversation going.
Spas K.
Spas K.Correct answer
Community Expert
Sep 29, 2020 2:55 PM UTC

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!

4 replies

Participant
Sep 29, 2020 10:57 PM UTC

Thanks one more time Spas!

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

Thank you!

Cheers!

Translate
Spas K.
Community Expert
Spas K.Community ExpertCorrect answer
Community Expert
Sep 29, 2020 2:55 PM UTC

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!

Translate
Rishabh_Tiwari
Legend
Sep 29, 2020 2:13 PM UTC

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

Translate
Participant
Sep 29, 2020 10:49 PM UTC

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

 

 

Translate