iminby

У блока должно работать свойство box-sizing: border-box;
Дальше при наведении добавляешь рамку, таким образом, рамка ,будет включаться в размеры блока, а не добавлять новые дополнительные пиксели и скачка не будет.

@keyframes , а причем тут это)

Просто задай для блок transition и задай размеры больше или , как именно ты его увеличиваешь на стиль , который у тебя цепляется при скроле.
и он просто плавно увеличится.

Грубо говоря, изначально header height 50px
когда он получает sticky свойство, height становится 100px
И чтобы это прошло плавно, просто добавить надо свойство transition

Тебе стоит ещё поучить и почитать, чем браться за макеты))
без обид)
Тут всё легко решается флексами.
и зачем тут вообще position))

Так у тебя же там calc есть, по сути это он у тебя жизни не даёт при расчёте на другие размеры.
Медиа запросов и calc при другом размере экрана и блока в 100%, оно у тебя ведь и высчитывает с вычетом от новых 100%. Я особо не всматривался, но вроде бы дело в этом

z-index всё решает)

body {font-size: 62.5%;}
.element {font-size: 1em;}

Это англ мужик там какой-то предложил.
смысл в том, если привык ставить пиксели, но хочешь использовать em, чтобы текст мог адаптироваться по барабану на браузеры и так далее...
то 62.5% от 16px по умолчанию в большинстве браузеров = 10px.

Таким образом если в пикселях в уме у тебя боди 10px, а 1em тогда тоже равен 10px.
Тогда удобно выставлять em считать.

Например, h1 2.6em будет у тебя 26px в уме.

Главное вложенность следить, чуть что, можешь использовать rem.