@Novamoscow

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

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

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

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

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

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

Какое из вариантов выбрать ( и почему) ?
Может ли кто помочь с написанием JSа ?
  • Вопрос задан
  • 3518 просмотров
Решения вопроса 2
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
html код одинаковый.
просто класс добавляешь при скроле (это в js есть куча готовых плагинов) и все остальное в css - position:fixed; и т.д.
Ответ написан
Комментировать
vetero4eg
@vetero4eg
Frontend
А что по задумке дизайнера кроется за этим гамбургером?? логотип?
По сути вопроса: ищите готовые плагины или посмотрите примеры на кодпене, ну вот, например, для нижней линии меню codepen.io/soulrider911/pen/dGuEn
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы