Я думаю, что проблема не связана с «липкими» аватарами.
Когда заголовок уменьшается, страница становится короче, и положение прокрутки страницы меняется. В результате возникает мерцание, поскольку страница прыгает туда-сюда в позицию, где заголовок должен уменьшаться.
Если выведу положение прокрутки страницы в консоль браузера, вы увидите это в действии… заголовок уменьшается примерно на 60 пикселей, и это отражается в положении прокрутки во время мерцания:
Чтобы решить это в JS, я думаю, можно добавить разницу высот к положению прокрутки в тот же момент, когда происходит переход заголовка.
Другой способ исправить это только с помощью CSS:
.d-header-wrap {
// это делает позицию заголовка фиксированной, поэтому он не входит в высоту страницы
position: fixed;
width: 100%;
}
#main-outlet {
// это сдвигает содержимое страницы на высоту большого заголовка
// необходимо, так как фиксированная позиция помещает заголовок поверх содержимого
padding-top: 150px !important;
}