title: Scroll element up instead of scrolling page down
body: <p>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 <em>anything</em> related to it.</p>
  <p>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.</p>
  <p>Although it may not be of help, this is the code I'm working with</p>
  <pre><code>&lt;Page&gt;
    &lt;Header&gt;
        &lt;h1 className={styles.titleText}&gt;HEADER TITLE&lt;/h1&gt;
        &lt;p&gt;Header sub text&lt;/p&gt;
    &lt;/Header&gt;
    &lt;Body&gt;
      &lt;h1&gt;This is where I would put some content ... if I was even slightly creative&lt;/h1&gt;
    &lt;/Body&gt;
  &lt;/Page&gt;
  </code></pre>
  <p>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.</p>