Creo que el problema no está relacionado con los avatares pegajosos.
Cuando la cabecera se encoge, la página se acorta y la posición de desplazamiento de la página cambia. Así que lo que sucede es que obtienes este parpadeo mientras la página entra y sale de la posición donde la cabecera debería encogerse.
Si muestro la posición de desplazamiento de la página en la consola de mi navegador, puedes verlo en acción… la cabecera se encoge unos 60px, y eso se refleja en la posición de desplazamiento mientras parpadea:
Para solucionar esto en JS, creo que probablemente podrías añadir la diferencia de altura a la posición de desplazamiento al mismo tiempo que ocurre la transición de la cabecera.
Otra forma de solucionar esto usando solo CSS sería:
.d-header-wrap {
// esto hace que la posición de la cabecera sea fija, por lo que no forma parte de la altura de la página
position: fixed;
width: 100%;
}
#main-outlet {
// esto compensa el contenido de la página por la altura de la cabecera grande
// necesario porque la posición fija pone la cabecera encima del contenido
padding-top: 150px !important;
}