I have a page that currently consists of a nav bar, a page header and the body/content. I've been looking for a way to have the body scroll up into/over the header instead of the entire page scrolling down. I'm not sure if that's the right way to word it as I'm sure someone would have asked this before but I can't find anything related to it.
As it is now, the header has text in the center and, when a user scrolls, loses space above the text. What I'd like is for the header to lose space below the text, effectively having scroll pull the body content up over the header.
Although it may not be of help, this is the code I'm working with
<Page>
<Header>
<h1 className={styles.titleText}>HEADER TITLE</h1>
<p>Header sub text</p>
</Header>
<Body>
<h1>This is where I would put some content ... if I was even slightly creative</h1>
</Body>
</Page>
Where Page, Header and Body are arbitarily styled componets for reuse on most pages and the navbar is inside _app as it's wanted on every page. I understand this may not be the best way, or even a very good way of doing things but I'm still learning and making mistakes as I go.
So I found the answer was to add position: fixed to my header and ensuring that it's z-index placed it behind the body. I also added an element the same size as my header that isn't position: fixed to reserve the space for the header when the user is scrolled to the top.
If you have the same problem, please know I am still learning as of writing and this may not be the best solution.