Tengo una página que actualmente consta de una barra de navegación, un encabezado de página y el cuerpo/contenido. He estado buscando una manera de hacer que el cuerpo se desplace hacia arriba o sobre el encabezado en lugar de que toda la página se desplace hacia abajo. No estoy seguro de si esa es la forma correcta de expresarlo, ya que estoy seguro de que alguien habría preguntado esto antes, pero no puedo encontrar nada relacionado.
Tal como está ahora, el encabezado tiene texto en el centro y, cuando un usuario se desplaza, pierde espacio sobre el texto. Lo que me gustaría es que el encabezado pierda espacio debajo del texto, de modo que el contenido del cuerpo se deslice hacia arriba sobre el encabezado.
Aunque puede que no sea de ayuda, este es el código con el que estoy trabajando
<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>Donde la página, el encabezado y el cuerpo son componentes de estilo arbitrario para su reutilización en la mayoría de las páginas y la barra de navegación está dentro de _app como se desea en cada página. Entiendo que esta puede no ser la mejor manera, o incluso una muy buena manera de hacer las cosas, pero sigo aprendiendo y cometiendo errores a medida que avanzo.
Así que descubrí que la respuesta era agregar position: fixed en mi encabezado y asegurándome de que su índice z lo colocara detrás del cuerpo. También agregué un elemento del mismo tamaño que mi encabezado que no está en position: fixed para reservar el espacio para el encabezado cuando el usuario se desplaza hacia la parte superior.
Si tiene el mismo problema, sepa que todavía estoy aprendiendo al momento de escribir y esta puede no ser la mejor solución.