Динамическое изменение высоте хедера (шапки) — что изменять?

Question

[jeruthadam]

Что лучше всего анимировать JSом - паддинг, высоту? Или может что-о другое? Я сейчас паддинг изменяю, и заметил косяк который я из-за него не могу исправить.

Речь о изменении размеров хедера при скролле

Comments

[Алексей Скляров]

В чем проблема менять высоту шапки и анимировать это дело?

[jeruthadam]

Алексей Скляров: я что спрашиваю в чем проблема? Я спрашиваю что лучше. Вот я сейчас испытываю проблемы с паддингом например.

Какие еще есть варианты? Если высотой то мне надо всю панель навигации переделывать. Это меняет очень много.

[Алексей Скляров]

jeruthadam: пришлите пример навигации. если вы будете увеличивать высоту, у вас проблема, как я понял, в том, что вся навигация будет не по середине блока. Такое решается простым flex-ом.

[jeruthadam]

Алексей Скляров: спасибо за предложение, но проблема не в этом. Проблема в том что лень переписывать внимательно чтоб ничего другого не поломать (там много от медиа запросов зависит еще).

ВОпрос несколько иной. Высота понятно. ЧТо еще можно? Или высота это все таки бест практиз.

[Алексей Скляров]

jeruthadam: часто используемое - изменение высоты. Какой косяк у вас возникает при padding? если вы имеете ввиду отсутствие плавности, то можно к шапке добавить css-свойство: transition: padding 1s ease;

[jeruthadam]

Алексей Скляров: косяк паддинга в том, что у меня есть модальное окно, которое для устранения смещения на место исчезнувшего скролла добавляет падинг к этому же элементу (хедеру) - и происходит глитч, весь хедер дергается.

[Ankhena]

jeruthadam:

ЧТо еще можно?

Странно сформулированный вопрос без прикрепленного макета.
Кроме отступов и высоты, есть еще границы, фон, тени, outline, позиционирование в конце концов. Какого эффекты вы пытаетесь добиться?

[jeruthadam]

Ankhena W: хочу добится ресайза хедера. Вот я переписал с height и все ожидаемо посыпалось :( miniature-morning.surge.sh

[jeruthadam]

Дура?

Answer 1

[Vlad Feninets]

JSом просто подписываешься на скролл, когда будет нужное value, например проскроллил на 200 пикселей - то вешаешь какой-то класс на header (например .header-pinned), а в этом классе добавляешь нужные свойства - педдинги или высоту и указываешь для хедера свойство transition в CSS (например transition: all 0.3s ease).
И всё, твой хедер будет анимироваться нативным CSS.

Comments

[jeruthadam]

Вопрос советую прочитать внимательно. При чем тут джеес вообще.