position:sticky;

Ein Klick auf das grün eingefärbte Element weist position:sticky; zu. Das Element scrollt anschließend so lange mit, bis es mit seiner Oberkante das Browserfenster erreicht. Dann wird es fixiert. Ein zweiter Klick stellt den Ursprungszustand wieder her.