Acho que o problema não está relacionado a avatares fixos.
Quando o cabeçalho encolhe, a página fica mais curta e a posição de rolagem da página muda. Então, o que acontece é que você obtém essa cintilação à medida que a página entra e sai da posição onde o cabeçalho deveria encolher.
Se eu exibir a posição de rolagem da página no console do meu navegador, você poderá ver isso em ação… o cabeçalho está encolhendo em cerca de 60px, e isso se reflete na posição de rolagem enquanto ela cintila:
Para resolver isso em JS, acho que você poderia adicionar a diferença de altura à posição de rolagem ao mesmo tempo em que a transição do cabeçalho acontece?
Outra maneira de corrigir isso usando apenas CSS seria:
.d-header-wrap {
// isso faz com que a posição do cabeçalho seja fixa, para que não faça parte da altura da página
position: fixed;
width: 100%;
}
#main-outlet {
// isso compensa o conteúdo da página pela altura do cabeçalho grande
// necessário porque a posição fixa coloca o cabeçalho sobre o conteúdo
padding-top: 150px !important;
}