Как прикрепить шапку сайта и меню к верху страницы после скролла, сложив меню в гамбургер?

Question

[Novamoscow]

Прошу помощи в поиске и написания решения. С JQuery Почти не знаком.

Имеется сверстанный header codepen.io/novamoscow/pen/LWbqRL
Для удобства прилагаю картинку.


Задача: после скролла header прилипает к верху окна браузера( не залезая на основной контент страницы) и видоизменяется, а меню складывается в гамбургер и показывается при нажатии.
Вот как это выглядит


В голове два варианта решения:
1. Изменить текущию верстку header'а после скролла, добавив и убрав нужны элементы. И каким то образом с помощью js это все приминять (вот каким не знаю)

2. Сверстать плавающие меняю отдельно и показывать его после скролла (как это выглядит в JS так же не знаю)

Какое из вариантов выбрать ( и почему) ?
Может ли кто помочь с написанием JSа ?

Answer 1

[Максим Тимофеев]

html код одинаковый.
просто класс добавляешь при скроле (это в js есть куча готовых плагинов) и все остальное в css - position:fixed; и т.д.

Answer 2

[Ольга Ветер]

А что по задумке дизайнера кроется за этим гамбургером?? логотип?
По сути вопроса: ищите готовые плагины или посмотрите примеры на кодпене, ну вот, например, для нижней линии меню codepen.io/soulrider911/pen/dGuEn

Comments

[Novamoscow]

Спасибо большое! Идеальное решение моей проблемы!)

[Ольга Ветер]

Novamoscow: ура, я рада :)