Nous avons un thème personnalisé, et l’en-tête rétrécit lorsque nous faisons défiler. Nous pensons que la fonctionnalité d’avatars collants récemment intégrée provoque un comportement de saccades juste au moment où l’en-tête rétrécit. Voir la vidéo ci-jointe :
.topic-post.sticky-avatar {
.topic-avatar {
position: relative !important;
top: unset !important; /* Peut être nécessaire dans certains cas */
}
}
Cela masque l’avatar collant, mais ne semble pas aider avec les saccades. Y a-t-il autre chose que je devrais faire pour que cela fonctionne, ou pour désactiver complètement la fonctionnalité ?
Je ne suis pas sûr à 100 % qu’il s’agisse du changement d’avatars collants - veuillez donc commenter si vous pensez que cela pourrait être autre chose.
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;
}
