Липкий HEADER c меню - помогите разобраться, плз
 

Привет всем!

Помогите, пожалуйста, понять осуществимость в принципе - сделать header при прокрутке лендинга липким фиксированным по верху с изменением его высоты.

Ну т.е. загвоздка в том, что сам header довольно большой по высоте - 300px, плюс не полный, а 90% по ширине.
В сам хедер входит лого и два длинных столбца меню, где все они в отдельных блоках (разный дизайн там).

При начале прокрутки хедер должен складываться в полосу, меню складываться..

Возможно вообще такое превращение такого высокого хедера в узкий? CSS, HTML, JS?

З.Ы. Вот мобильная версия изменяется соответственно ширины, а как и что указывать для изменений при прокрутке?

Спасибо заранее )

MaVikDe,
неплохо было бы показать свой код для полного понимания :)

вопрос чисто теоретический, код не обязателен..
в общем, целый день копалась, но ответ найден - такое превращение возможно :)