I'm struggling with a design challenge on my website. Currently, the page layout consists of a navigation bar, a header section, and the main body content. I'm trying to achieve a scrolling effect where the body content moves up and over the header instead of the entire page scrolling down. I've been searching for solutions without much success, so any guidance would be greatly appreciated.
Right now, the header text is centered and when a user scrolls, it loses space above the text. What I really want is for the header to maintain its space below the text, allowing the body content to scroll smoothly over it.
While I know this code snippet may not be helpful, this is what I currently have:
<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>
The Page, Header, and Body components are styled for reuse across multiple pages, while the navbar is located inside _app since it appears on every page. I recognize that there may be better ways to approach this design challenge, but I'm still learning and open to feedback.