position sticky und Text-fade out beim Scrollen

[djr]

Du kannst das Pseudoelement in #upper_wrapper statt nav einfügen. Wenn Du dann top: weg lässt reiht sich was Pseudoelement in die nächste Zeile und Du musst nur noch den padding-bottom von #upper_wrapper überwinden. Dies könntest Du mit einem transparenten border machen, dann aber das Hintergrundbild auf background-repeat: no-repeat; stellen.

Alles sehr hacky 😐

Anmerken will ich noch, dass solche Fadeouts, über Text hinweg, keine gute User Experience zulassen, da der transparente Teil ggf. interaktive Elemente, wie Links, überdeckt, die dann nicht mit der Maus ansteuerbar sind.