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

Question

我有一个页面，当前由导航栏、页面 header 和正文/内容组成。 我一直在寻找一种方法让正文向上滚动到 header 中/上方，而不是整个页面向下滚动。 我不确定这是否是正确的措辞方式，因为我确定之前有人会问过这个问题，但我找不到与之相关的任何内容。

就像现在一样，header 的中心是文本，当用户滚动时，文本上方的空间就会消失。 我想要的是让 header 失去文本下方的空间，有效地让滚动将正文内容向上拉到 header 上方。

虽然它可能没有帮助，但这是我正在使用的代码

<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>

其中 Page、Header 和 Body 是任意样式的 comp.nets，以便在大多数页面上重复使用，而导航栏位于 _app 内，因为它在每个页面上都需要。 我知道这可能不是最好的方法，甚至不是很好的做事方法，但我仍在学习和犯错误，就像我 go 一样。

Answer 1

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

如果您遇到同样的问题，请知道我在撰写本文时仍在学习，这可能不是最佳解决方案。

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

问题描述

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