[Menu que muda cor no Wordpress]

Bom dia! Faz tempo que eu procuro mais não encontro um código CSS para mudar a cor do menu principal do meu site wordpress de acordo com a rolagem.

Por exemplo, o código que eu tenho muda a cor do menu quando a pessoa rola a página para baixo e quando ela volta para cima ele fica na cor original. Porém o menu quando rolado fica somente com uma cor, eu precisaria que de acordo com a parte que a pessoa esta no site ele fique com uma cor diferente.

Esse é o código que eu tenho:

div#top-bar-wrap {
display: none!important;
}

#header.elementor-sticky--effects {
background-color: #000000d7;
transition: all .5s ease;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
}

#header.elementor-sticky--effects .logo img {
content:url('link da logo principal do site');
}

#header.elementor-sticky--effects .menufixo li a {
color: #fff!important;
}

#header.elementor-sticky--effects .menufixosecundario li a {
color: #fff!important;
}

 

O que eu preciso é exatamente como nesse site: https://www.c6bank.com.br/

Reparem que o menu fixo muda de cor, de acordo com a parte que ele está no site.

 

Desde já agradeço pela ajuda!