position sticky und Text-fade out beim Scrollen

[Rolf B]

Hallo grmblfx,

Das Problem ist, dass ich dazu eine absolute Höhe angeben muss

Nein. Brauchst Du nicht. Du brauchst auch kein Pseudo-Element.

<header>
  <p>Dr. Arbeit.de</p>
  <nav><ul><li>Suchen</li><li>Anbieten</li><li>Links</li></ul></nav>
</header>
<h1>Wie man eine Doktorarbeit schreibt</h1>

body {
  --fade-height: 1.5em;
}
header {
  text-align: center;
  position: sticky;
  top: 0;
  padding-bottom: var(--fade-height);
  margin-bottom: calc(0 - var(--fade-height));
  background-image: linear-gradient(to top, transparent, white var(--fade-height));
  pointer-events: none;
  border-bottom: 1px solid red;   /* Nur zur Visualisierung der Grenze */
}
h1 {
  margin-top: var(--fade-height);
}

Durch Verändern des Wertes des custom-property --fade-height kannst Du bestimmen, wie hoch der Ausblendebereich ist. Das Custom Property sorgt dafür, dass die Höhe des Ausblendebereichs nicht an drei Stellen als magic number auftaucht. Der IE kann das nicht, aber der kann auch kein position:sticky. So what.

Der Fade-Bereich sollte nicht höher sein als der margin-top der Seitenüberschrift, am besten gleich hoch, sonst blendest Du die schon in "Normalstellung" weg. Das stelle ich mit der margin-top Angabe für h1 sicher.

Ich habe <nav> in den <header> gesteckt, damit sie gemeinsam sticky sind. Die bottom-border soll nur die Grenze des Fading-Bereichs visualisieren. Ich setze unten ein Padding, um Platz für den Ausblendebereich zu schaffen, und einen gleichgroßen negativen Margin, damit die folgenden Elemente an dieser Stelle den Header überlappen können. Dadurch brauche ich kein Pseudoelement. Die --fade-height habe ich der h1 Überschrift als margin-top gegeben, damit der Textinhalt der Überschrift genau an den Fade-Bereich angrenzt.

Schließlich noch der Einwand mit Buttons und Links von djr. Dagegen hilft pointer-events: none;.

Rolf