Penso che il problema non sia correlato agli avatar fissi.
Quando l’intestazione si rimpicciolisce, la pagina diventa più corta e la posizione di scorrimento della pagina cambia. Quindi, ciò che accade è che si verifica questo sfarfallio mentre la pagina entra ed esce dalla posizione in cui l’intestazione dovrebbe rimpicciolirsi.
Se visualizzo la posizione di scorrimento della pagina nella console del mio browser, puoi vederlo in azione… l’intestazione si sta rimpicciolendo di circa 60 pixel, e questo si riflette nella posizione di scorrimento mentre sfarfalla:
Per risolvere questo problema in JS, penso che potresti probabilmente aggiungere la differenza di altezza alla posizione di scorrimento nello stesso momento in cui avviene la transizione dell’intestazione?
Un altro modo per risolvere questo problema usando solo CSS sarebbe:
.d-header-wrap {
// questo rende la posizione dell'intestazione fissa, quindi non fa parte dell'altezza della pagina
position: fixed;
width: 100%;
}
#main-outlet {
// questo compensa il contenuto della pagina con l'altezza dell'intestazione grande
// necessario perché la posizione fissa mette l'intestazione sopra il contenuto
padding-top: 150px !important;
}