Tengo un sitio web angular como este:

Pero cuando me desplazo hacia arriba, el texto se cruza con la barra de navegación:

Me gustaría que cada línea de texto desaparezca tan pronto como esté a menos de 4 rem de la parte superior. El texto que está a más de 4 rem de la parte superior aún debe ser legible.

Mi idea era usar un div transparente que coincidiera con la posición y el tamaño de la barra de navegación y tuviera la foto de fondo y un índice z más bajo que la barra de navegación, pero más alto que el texto. Pero, ¿cómo haces que la foto se alinee en este div?

¿Me puede dar una pista de cómo lograr esto?