Плавающий верх сайта, меню, логотип, контакты, как менять стили при откреплении от верха?

Всем привет.
Реализовал открепления верха сайта, чтоб плавало по сайту, контакты и меню, два блока.
Теперь встал вопрос, как сделать чтобы при откреплении от верха, стиль меню менялся, хочу по ужи сделать, чтоб не такое широкое было и логотип меньше сделать, я так понимаю такое только через js надо организовывать, чтобы типа при таком-то отступе сверху допустим 150px, применялись стили к блоку где логотип и где меню.

Вообщем кто понял меня, как такое реализовывают?

Я сделал стиль для логотипа чтобы он меньше становился. Осталось как-то применить к логотипу.
.logos img {
  height: 35px;
}


И стиль для блока где логотип и менюшка (данный стиль, уменьшает отступы синего блока), тем самым он становиться узким. Осталось его как-то применить.
.menus {
  padding: 10px 0 10px 0;
}


Для плавающих блоков я применил такой стиль, обернул блоки в div и прикрутил css
.plav {
  position: sticky;
  top: 0;
  z-index:9999;
}


Рабочий пример схемы тут:
https://jsfiddle.net/vlit/ag14ju8s/71/
  • Вопрос задан
  • 128 просмотров
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Вот – простой и понятный пример. Без кучи мусора.
https://jsfiddle.net/DelphinPRO/dztLf9no/

Ответ написан
Пригласить эксперта
Ответы на вопрос 1
MaKvc
@MaKvc
Отчаянный веб-разработчик
Тут все разжевали Можно сделать вывод, что требуется сторонняя библиотека, ибо все решения, имеют проблемы.
Эта библиотека делает то, что вам нужно.
Ответ написан
Ваш ответ на вопрос

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

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