How to rearrange header elements on page scroll?

Question

css

Hello friends!

There is a hat. There is an upper part with a logo, a city selection, a phone number and a call order button.
Below is the menu.


When scrolling, the header should look like this


. Is it possible to do without duplicating the logo and the phone?

Answer 1

You need some kind of sticky js plugin or something similar .
For example, stickyjs.com
When scrolling, add a class to your header and hang the necessary styles on it

$("#sticker").sticky({
topSpacing:0,
className: 'sticky-header' //ваш класс
});

Answer 2

See.
Make a function

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

Write css in which the scroll class will change the styles of the header.