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

Question

[ended]

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

Использую меню bootstrap 4

Answer 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');
    }
});

Comments

[ended]

все отлично, я делал так же, но забыл про !important ... Спасибо