position sticky und Text-fade out beim Scrollen

[Rolf B]

Hallo grmblfx,

da habe dich dann sehr falsch verstanden 😳. Bitte entschuldige meinen Ausbruch.

pointer-events:none hatte den Sinn, auf den Einwand von djr zu reagieren. Wenn der Fadeout-Bereich über einem Button oder Link im Haupttext ist, dann kannst Du den noch halbsichtbaren Link oder Button nicht mehr klicken.

Dass das die Links in der Navigation ebenfalls tötet, daran habe ich nicht gedacht; meine ersten Versuche hatten noch das ::after Element.

Ob man es jetzt noch mit einem einzigen header Element retten kann? Hmmm. Für die nav Links könnte man pointer-events:auto setzen, aber da ist noch was. pointer-events:none bewirkt auch, dass ein Link, der weit oben und unter dem Header versteckt ist, trotzdem noch geklickt werden kann. Das ist ganz schlechte UX.

Also doch ein ::after Element, da muss pointer-events:none aber auf jeden Fall 'rein.

Die Frage der Positionierung kann man so lösen, dass man die Position in Bezug auf die Unterkante berechnet. Mit Hilfe der Variablen --fade-height kann man das hier machen:

header::after {
   position: absolute;
   width: 100%;
   height: var(--fade-height);
   bottom: calc(0px - var(--fade-height));
}

Wenn ich für ein absolutes Element die bottom-Eigenschaft setze, wird der Wert relativ zur Unterkante des Elternelements gerechnet.

Guck noch mal ins Fiddle: https://jsfiddle.net/Rolf_b/ekxhob39/

Um den Effekt von pointer-events zu zeigen, habe ich Buttons in den Text gesetzt und dafür einen Click-Handler registriert 😀.

Möglicherweise geht es auch ohne absolute Positionierung, aber ein ::after Element (oder ein technisches div im HTML) ist nötig, und es artet meiner Vermutung nach in Gefummel mit Gradienten aus.

Rolf