推測で申し訳ありませんが失礼します……
「スクロール速度によって○の出方が変わる」という現象は、「実のところscrollイベントは、思った以上に疎らに発火している」というのが原因だと言えそうです。
window.scrollY <= rowHeight(縦スクロール幅が.row(○)の縦幅より小さい)の時に、○の上端位置を変更する処理が動いていますが、勢いよくスクロールすると、if内の条件が満たされない=ifブロック内の処理が行われない、となるので、中途半端な位置になります。
中途半端に○が出てくる状態をどうにかしようとするならば、条件分岐なしで処理を必ず発火させるようにすれば良いです。

document.addEventListener('scroll', () => {
  row.style.top = `-${window.scrollY}px`;
});

で、中途半端に○が出てくる状態は解決されるものの、○が無制限で上に飛んでいってしまいます。
ここで、複数の数値を入力すると最小値を出力してくれるMath.min関数でそれっぽく仕上げまして、

document.addEventListener('scroll', () => {;
  row.style.top = `-${Math.min(rowHeight, window.scrollY)}px`;
})

で、それらしい動きをするようにできます。

スクロールイベントは、スクロールするたびに処理が走ってしまい、パフォーマンスが悪くなる可能性があります。
軽い処理だと問題ないとは思いますが、パフォーマンスを気にするのであれば「Intersection Observer」を利用することをおすすめします。

若干動きが異なりますが、似たような動きを「Intersection Observer」を用いて再現してみました。
ご参考になれば幸いです。

See the Pen Untitled by yotty (@yotty) on CodePen.