Wir haben ein benutzerdefiniertes Theme, und der Header schrumpft, wenn wir scrollen. Wir glauben, dass die kürzlich integrierte Funktion für Sticky Avatars ein „Thrashing“-Verhalten verursacht, gerade wenn der Header schrumpft. Siehe angehängtes Video:
.topic-post.sticky-avatar {
.topic-avatar {
position: relative !important;
top: unset !important; /* Kann in einigen Fällen benötigt werden */
}
}
Das versteckt den Sticky Avatar, scheint aber beim „Thrashing“ nicht zu helfen. Gibt es etwas anderes, das ich tun sollte, um dies zum Laufen zu bringen oder die Funktion vollständig zu deaktivieren?
Ich bin mir nicht zu 100 % sicher, ob es sich um die Sticky Avatars-Änderung handelt – bitte kommentieren Sie, wenn Sie glauben, dass es etwas anderes sein könnte.
Ich glaube, das Problem hat nichts mit „sticky avatars“ zu tun.
Wenn sich die Kopfzeile verkleinert, wird die Seite kürzer und die Scroll-Position der Seite ändert sich. Was also passiert, ist, dass Sie dieses Flimmern bekommen, wenn die Seite aus der Position herausspringt, in der sich die Kopfzeile verkleinern sollte.
Wenn ich die Scroll-Position der Seite in meiner Browserkonsole ausgeben lasse, können Sie dies in Aktion sehen… die Kopfzeile verkleinert sich um etwa 60 Pixel, und das spiegelt sich in der Scroll-Position wider, während sie flackert:
Um dies in JS zu lösen, könnten Sie wahrscheinlich die Höhendifferenz zur Scroll-Position addieren, zur gleichen Zeit, in der der Kopfzeilenübergang stattfindet?
Eine andere Möglichkeit, dies nur mit CSS zu beheben, wäre:
.d-header-wrap {
// dies macht die Kopfzeilenposition fest, sodass sie nicht Teil der Seitenhöhe ist
position: fixed;
width: 100%;
}
#main-outlet {
// dies versetzt den Seiteninhalt um die Höhe der großen Kopfzeile
// notwendig, da die feste Position die Kopfzeile über den Inhalt legt
padding-top: 150px !important;
}
