Alterar Background do menu de acordo com a seção

[AlanB. 0]

Boa tarde galera, tudo bem? estou tentando aprender javascript, mas o que eu preciso fazer eu ainda não sei.

 

Eu tenho o meu menu do site e logo abaixo tenho a section serviços e a section produtos. Eu queria que inicialmente o background do menu fosse azul, mas quando a pessoa desse um scroll e chegasse na section serviços, o background do menu alterasse a cor. Alguem pode me ajudar? 

[Jack Oliveira 1]

Se deu pra entender

seria isso aqui

JAVASCRIPT

$(window).scroll(function() { 
    var scroll = $(window).scrollTop();
 
    if (scroll > 500) {
        $('.menu').addClass('menu-auxiliar');
    } else {
        $('.menu').removeClass('menu-auxiliar');
    }
});

CSS

.menu {
    min-height: 50px;
    position: fixed;
    right: 0;
    top: 0;
    left: 0;
    background-color: blue;
}

.menu-auxiliar {background-color:orange;}

.conteudo {
    height: 2000px;
}

HTML

<div class="menu"></div>
<div class="conteudo"></div>

Outro exemplo também assim

(function () {
    var menu = document.getElementById('menu');
    window.addEventListener('scroll', function () {
        if (window.scrollY > 0) menu.classList.add('menuFixo');
        else menu.classList.remove('menuFixo');
    });
})();

.menuFixo {
    position: fixed;
    top: 0px;
    background-color: #ccf;
}
* {
    padding: 0px;
    margin: 0px;
}
div {
    border: 1px solid blue;
    width: 100%;
}
#menu {
    height: 50px;
}
#conteudo {
    height: 2000px;
}

<div id="menu"></div>
<div id="conteudo"></div>

Qualquer coisa veja mais no link a baixo

Fórum Imasters