Как перестроить элементы шапки при скролле страницы?

Question

[solo_83]

Приветствую, друзья!

Имеется шапка. Есть верхняя часть с лого, выбором города, телефоном и кнопкой заказа звонка.
Ниже располагается меню.


При скролле шапка должна принимать такой вид


Можно ли обойтись без дублирования лого и телефона?

Comments

[Froggyweb]

можно поиграться с order на флексах или гридах
только телефон что-то другой :)
так что скорее всего дубль. Для SЕО можно обернуть в noindex

Answer 1

[dimirsh1]

Смотрите.

Сделайте функцию

$('body, html').scroll((function(){
if($('body, html').scrollTop()>200) {
   $('.header').addClass('scroll');
} else {
   $('.header').removeClass('scroll');
}
});

Напишите css, в котором класс scroll будет менять стили шапки.