@ended

Как правильно настроить фон меню при скролле страницы?

Как сделать адаптивное меню вверху сайта, чтобы оно было всегда сверху страницы, при прокрутке меняло фон с прозрачного на цветной, а на моб устройствах был цветной фон?

Использую меню bootstrap 4
  • Вопрос задан
  • 31 просмотр
Решения вопроса 1
@n1ksON
Интерн
Зафиксировать блок и задать фон на устройствах с шириной экрана меньше, чем 640px:
.menu {
  position: fixed;
  top: 0;
  right: 0;
  background: none;
}
@media screen and (max-width: 640px) {
  background: orange !important;
}

Изменение фона при прокрутке:
$(window).on('load scroll', function() { 
    if ($(this).scrollTop() >= '1') {
        $('.menu').css('background', 'orange');
    } else {
        $('.menu').css('background', 'none');
    }
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
25 февр. 2021, в 11:19
7000 руб./за проект
25 февр. 2021, в 09:28
500 руб./в час
25 февр. 2021, в 09:08
25000 руб./за проект