向上滚动元素而不是向下滚动页面

Question

I have a page that currently consists of a nav bar, a page header and the body/content.我有一个页面，当前由导航栏、页面 header 和正文/内容组成。 I've been looking for a way to have the body scroll up into/over the header instead of the entire page scrolling down.我一直在寻找一种方法让正文向上滚动到 header 中/上方，而不是整个页面向下滚动。 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.就像现在一样，header 的中心是文本，当用户滚动时，文本上方的空间就会消失。 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.我想要的是让 header 失去文本下方的空间，有效地让滚动将正文内容向上拉到 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 comp.nets for reuse on most pages and the navbar is inside _app as it's wanted on every page.其中 Page、Header 和 Body 是任意样式的 comp.nets，以便在大多数页面上重复使用，而导航栏位于 _app 内，因为它在每个页面上都需要。 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.我知道这可能不是最好的方法，甚至不是很好的做事方法，但我仍在学习和犯错误，就像我 go 一样。

Answer 1

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.所以我发现答案是添加position: fixed到我的 header 并确保它的 z-index 将它放在身体后面。 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.我还添加了一个与我的 header 大小相同但不是position: fixed以在用户滚动到顶部时为 header 保留空间。

If you have the same problem, please know I am still learning as of writing and this may not be the best solution.如果您遇到同样的问题，请知道我在撰写本文时仍在学习，这可能不是最佳解决方案。

向上滚动元素而不是向下滚动页面

问题描述

1 个解决方案

解决方案1
0 2022-03-26 03:58:07

向上滚动元素而不是向下滚动页面

问题描述

1 个解决方案

解决方案1 0 2022-03-26 03:58:07

解决方案1
0 2022-03-26 03:58:07