アバターが固定されていることとは関係ない問題だと思います。
ヘッダーが縮小すると、ページが短くなり、スクロール位置が変化します。そのため、ヘッダーが縮小されるべき位置にページが飛び込んだり抜け出したりすることで、ちらつきが発生します。
ブラウザのコンソールにページのスクロール位置を出力すると、これが確認できます。ヘッダーは約60px縮小され、それがちらつきとしてスクロール位置に反映されています。
これをJSで解決するには、ヘッダーのトランジションが発生するのと同時に、スクロール位置に高さの違いを追加すればよいのではないでしょうか。
CSSのみでこの問題を解決する別の方法は以下の通りです。
.d-header-wrap {
// ヘッダーの位置を固定し、ページ高さの一部でなくします
position: fixed;
width: 100%;
}
#main-outlet {
// 固定位置によりヘッダーがコンテンツの上に配置されるため、
// 大きいヘッダーの高さ分だけページコンテンツをオフセットします
padding-top: 150px !important;
}