Динамическое изменение высоте хедера (шапки) — что изменять?
Что лучше всего анимировать JSом - паддинг, высоту? Или может что-о другое? Я сейчас паддинг изменяю, и заметил косяк который я из-за него не могу исправить.
jeruthadam: пришлите пример навигации. если вы будете увеличивать высоту, у вас проблема, как я понял, в том, что вся навигация будет не по середине блока. Такое решается простым flex-ом.
Алексей Скляров: спасибо за предложение, но проблема не в этом. Проблема в том что лень переписывать внимательно чтоб ничего другого не поломать (там много от медиа запросов зависит еще).
ВОпрос несколько иной. Высота понятно. ЧТо еще можно? Или высота это все таки бест практиз.
jeruthadam: часто используемое - изменение высоты. Какой косяк у вас возникает при padding? если вы имеете ввиду отсутствие плавности, то можно к шапке добавить css-свойство: transition: padding 1s ease;
Алексей Скляров: косяк паддинга в том, что у меня есть модальное окно, которое для устранения смещения на место исчезнувшего скролла добавляет падинг к этому же элементу (хедеру) - и происходит глитч, весь хедер дергается.
Странно сформулированный вопрос без прикрепленного макета.
Кроме отступов и высоты, есть еще границы, фон, тени, outline, позиционирование в конце концов. Какого эффекты вы пытаетесь добиться?
JSом просто подписываешься на скролл, когда будет нужное value, например проскроллил на 200 пикселей - то вешаешь какой-то класс на header (например .header-pinned), а в этом классе добавляешь нужные свойства - педдинги или высоту и указываешь для хедера свойство transition в CSS (например transition: all 0.3s ease).
И всё, твой хедер будет анимироваться нативным CSS.
