Почему свойства fixed плохо работает?

Question

[Evgeniy]

Добрый день!
У меня возникла такая проблема что блок header резко переходит вниз. При скролле, блок шапки не медленно спускается а сразу переходит на около 100px. Почему такое происходит?
https://mpmaster.ru

Comments

[Антон Усачев]

Навскидку могу предположить 5-6 вариантов. Но, пока мы не увидим код, помочь не сможем.

[Evgeniy]

Извините, поставил ссылку на сайт.
https://mpmaster.ru

[alex]

Эдгар Хачатуров, нафиг тут вообще js? изначально сделайте блок fixed и все. а срывается у вас не хэдер, а main, т.к. хэдер получил fixed и выпал из потока документа и его место резко занял main

[Evgeniy]

Если я сделаю изначально, тогда main сразу заходит под хедер

[alex]

Эдгар Хачатуров, отступ сверху для main нельзя задать чтоле? или вас там палкой за это бьют?

Answer 1

[Антон Усачев]

Простым решением будет дать хидеру top: 0; position: sticky;, а скрипт убрать. Он там явно не нужен при условии, что хидер с самого начала вверху.
А причина скачка в том, что при скролле более 1 пикс от верха, хидер с относительного позиционирования кидается в фиксированное. При отсутствии паддинга равного шапке у враппера, вся страница летит на фикс к top: 0;

Comments

[Evgeniy]

Большое спасибо Антон