Ich glaube, das Problem hat nichts mit „sticky avatars“ zu tun.
Wenn sich die Kopfzeile verkleinert, wird die Seite kürzer und die Scroll-Position der Seite ändert sich. Was also passiert, ist, dass Sie dieses Flimmern bekommen, wenn die Seite aus der Position herausspringt, in der sich die Kopfzeile verkleinern sollte.
Wenn ich die Scroll-Position der Seite in meiner Browserkonsole ausgeben lasse, können Sie dies in Aktion sehen… die Kopfzeile verkleinert sich um etwa 60 Pixel, und das spiegelt sich in der Scroll-Position wider, während sie flackert:
Um dies in JS zu lösen, könnten Sie wahrscheinlich die Höhendifferenz zur Scroll-Position addieren, zur gleichen Zeit, in der der Kopfzeilenübergang stattfindet?
Eine andere Möglichkeit, dies nur mit CSS zu beheben, wäre:
.d-header-wrap {
// dies macht die Kopfzeilenposition fest, sodass sie nicht Teil der Seitenhöhe ist
position: fixed;
width: 100%;
}
#main-outlet {
// dies versetzt den Seiteninhalt um die Höhe der großen Kopfzeile
// notwendig, da die feste Position die Kopfzeile über den Inhalt legt
padding-top: 150px !important;
}