@@einsiedler

Felix und Gunnar haben dir genau diese Ansätze gegeben, Gunnar sogar ein Beispiel.

Hmmm... nochmehr JS-Kram, ich wollte mich eigentlich davon befreien und das was ich schon habe, entsorgen.

Du willst auf eine Nutzerinteraktion (Scrollen) reagieren. Um auf Nutzerinteraktionen zu reagieren, ist JavaScript oft das Richtige.

Und durch: html {scroll-behavior: smooth;} ersetzen.

@media screen and (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

Ja, dafür braucht man kein JavaScript. Aber was hat das mit deinem Button Link zu tun, der erscheinen soll, wenn der Nutzer ein bisschen runtergescrollt hat?

Spoiler: nichts.

Vielleicht ließe sich da was mit scroll-driven animations hinbasteln – wenn es denn mal browserübergreifend funktioniert. (Gegenwärtig nur in Chromia, in Firefox hinter Feature-Flag, in Safari noch gar nicht.)

Vielleicht aber auch nicht, weil als keyframe selector nur Prozentwerte (und Aliasse from und to) erlaubt sind, keine absoluten Längen.

So lieber Felix. soviel zu Deinem Einzeiler, jetzt trete mal in Aktion.

Ist er doch schon. Du hast seinen Rat ignoriert.

Sag ich nichts zu.

Da sag ich jetzt mal auch nichts zu.

Kwakoni Yiquan