Je pense que le problème n’est pas lié aux avatars “collants”.
Lorsque l’en-tête rétrécit, la page devient plus courte et la position de défilement de la page change. Ce qui se passe, c’est que vous obtenez ce scintillement car la page entre et sort de la position où l’en-tête devrait rétrécir.
Si j’affiche la position de défilement de la page dans ma console de navigateur, vous pouvez le voir en action… l’en-tête rétrécit d’environ 60 px, et cela se reflète dans la position de défilement car elle scintille :
Pour résoudre cela en JS, je pense que vous pourriez probablement ajouter la différence de hauteur à la position de défilement en même temps que la transition de l’en-tête se produit ?
Une autre façon de résoudre ce problème en utilisant uniquement CSS serait de :
.d-header-wrap {
// cela rend la position de l'en-tête fixe, donc elle ne fait pas partie de la hauteur de la page
position: fixed;
width: 100%;
}
#main-outlet {
// cela décale le contenu de la page de la hauteur de l'en-tête large
// nécessaire car la position fixe place l'en-tête au-dessus du contenu
padding-top: 150px !important;
}