Abbiamo un tema personalizzato e l’intestazione si rimpicciolisce mentre scorriamo. Pensiamo che la funzionalità degli avatar fissi integrata di recente stia causando un comportamento di “thrashing” proprio mentre l’intestazione si rimpicciolisce. Vedi il video allegato:
.topic-post.sticky-avatar {
.topic-avatar {
position: relative !important;
top: unset !important; /* Potrebbe essere necessario in alcuni casi */
}
}
Questo nasconde l’avatar fisso, ma non sembra aiutare con il “thrashing”. C’è qualcos’altro che dovrei fare per far funzionare questo o disabilitare completamente la funzionalità?
Non sono sicuro al 100% che si tratti della modifica degli avatar fissi, quindi per favore commenta se pensi che possa essere qualcos’altro.
Penso che il problema non sia correlato agli avatar fissi.
Quando l’intestazione si rimpicciolisce, la pagina diventa più corta e la posizione di scorrimento della pagina cambia. Quindi, ciò che accade è che si verifica questo sfarfallio mentre la pagina entra ed esce dalla posizione in cui l’intestazione dovrebbe rimpicciolirsi.
Se visualizzo la posizione di scorrimento della pagina nella console del mio browser, puoi vederlo in azione… l’intestazione si sta rimpicciolendo di circa 60 pixel, e questo si riflette nella posizione di scorrimento mentre sfarfalla:
Per risolvere questo problema in JS, penso che potresti probabilmente aggiungere la differenza di altezza alla posizione di scorrimento nello stesso momento in cui avviene la transizione dell’intestazione?
Un altro modo per risolvere questo problema usando solo CSS sarebbe:
.d-header-wrap {
// questo rende la posizione dell'intestazione fissa, quindi non fa parte dell'altezza della pagina
position: fixed;
width: 100%;
}
#main-outlet {
// questo compensa il contenuto della pagina con l'altezza dell'intestazione grande
// necessario perché la posizione fissa mette l'intestazione sopra il contenuto
padding-top: 150px !important;
}
