MENU TRANSPARENTE MUDA DE COR AO RODAR BARRA DE ROLAGEM

olá kaic,

estava por coincidência criando e me quebrando num menu parecido ontem.

veja se te ajuda, completinho, só adaptar...

até...

CODE:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
<style type="text/css">
 @import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";

 body {
 font-family: 'Poppins', sans-serif;
 padding-top: 90px;
 }

 /* marcacao para container ajustar o slide ao clicar no menu, só ficar certo assim */
 .container {
 padding-left: 5%;
 padding-right: 5%;
 }

 .container-fluid {
 padding-left: 8%;
 padding-right: 8%;
 }

 /* animacao criada para dar efeito fade em cada slide */
 .animate-in-up {
 transition: all 1.3s ease-out;
 position: relative;
 opacity: 1;
 bottom: 0px;
 }

 .animate-in-up.out-of-viewport {
 bottom: 40px;
 opacity: 0;
 }

 .animate-in-down {
 transition: all 1.3s ease-out;
 position: relative;
 opacity: 1;
 top: 0px;
 }

 .animate-in-down.out-of-viewport {
 top: 40px;
 opacity: 0;
 }

 .animate-in-left {
 transition: all 1.0s ease-out;
 position: relative;
 opacity: 1;
 left: 0%;
 }

 .animate-in-left.out-of-viewport {
 opacity: 0;
 left: -5%;
 }

 .animate-in-right {
 transition: all 1.0s ease-out;
 position: relative;
 opacity: 1;
 left: 0%;
 }

 .animate-in-right.out-of-viewport {
 opacity: 0;
 left: 5%;
 }

 h1 {
 font-size: 60px;
 font-weight: 600;
 margin-top: 140px;
 }

 h5 {
 font-size: 40px;
 font-weight: 400;
 margin-bottom: 30px;
 }

 p {
 font-size: 1.2em;
 line-height: 1.8em;
 font-weight: 300;
 color: #555;
 margin: 30px 0;
 }

 strong {
 font-weight: 600;
 color: #333;
 }

 .line {
 width: 100%;
 height: 1px;
 margin: 30px 0;
 border-bottom: 1px dashed #ddd;
 }

 /* NAVBAR */
 .navbar {
 padding-top: 5px;
 padding-bottom: 5px;
 background-color: white;
 margin: 0px;
 color: #333;
 transition: all 0.3s;
 z-index: 9999;
 -webkit-box-shadow: 0px 0px 5px -1px rgba(171, 171, 171, 1);
 -moz-box-shadow: 0px 0px 5px -1px rgba(171, 171, 171, 1);
 box-shadow: 0px 0px 5px -1px rgba(171, 171, 171, 1);
 }

 /* NAVBAR - config do logotipo imagem e logo texto */
 .navbar-brand {
 padding: 0px;
 font-size: 1.25rem;
 white-space: nowrap;
 }
 .navbar-brand>img {
 height: auto;
 display: block;
 padding: 0px;
 width: 16%;
 }

 .navbar-brand:focus,
 .navbar-brand:hover {
 text-decoration: none
 }

 /* funciona só com texto, com imagem não ( deve se incluir o brand-centered por fora do navbar-brand )*/
 /*
 .brand-centered {
 display: flex;
 justify-content: center;
 position: absolute;
 width: 100%;
 left: 0;
 top: 0;
 }
 .brand-centered .navbar-brand {
 display: flex;
 align-items: center;
 }
 */

 /* tags para mudanças ao descer scroll com jquery para mudar cores */
 .navbar.compressed {
 padding-top: 10px;
 padding-bottom: 10px;
 background: #002a5c;
 color: white;
 box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
 }

 .navbar-brand.changecolorlogo {
 height: auto;
 filter: brightness(0) invert(1);
 }

 .navbar-nav.changecolormenu a,
 .navbar-nav.changecolormenu a.active {
 color: white !important;
 }

 .navbar-nav.changecolormenu li a:hover,
 .navbar-nav.changecolormenu li.active a {
 color: #ff9326 !important;
 background-color: transparent;
 }

 /* NAVBAR - links do menu */
 .navbar-nav a,
 .navbar-nav a.active {
 color: #00224b !important;
 background-color: transparent;
 font-size: 15px;
 font-weight: 600;
 width: 100%;

 -moz-transition: all .3s;
 -o-transition: all .3s;
 -webkit-transition: all .3s;
 transition: all .3s;
 }

 .navbar-nav li a:hover,
 .navbar-nav li.active a {
 color: #f4511e !important;
 background-color: white;
 font-weight: 600;
 width: 100%;
 }

 /* NAVBAR - toggle button */
 .navbar-light .navbar-toggle {
 border: none;
 border-radius: 40px;
 width: 40px;
 height: 40px;
 font-size: 20px;

 background-color: dodgerblue;
 color: white;

 /*
 background-color: transparent;
 color: darkgrey;
 */

 cursor: pointer;

 -moz-transition: all .8s;
 -o-transition: all .8s;
 -webkit-transition: all .8s;
 transition: all .8s;
 }

 .navbar-light .navbar-toggle:hover {
 background-color: #f6761c;
 border-radius: 40px 0px 40px 40px;
 color: white;
 }

 @media only screen and (min-width: 0px) and (max-width: 480px) {
 /* hack para resolver logo no centro em mobile */
 .navbar-brand {
 margin-left: 27%;
 }
 .navbar-brand > img {
 width: 70%;
 margin-top: -60px;
 }

 .navbar-nav.changecolormenu a,
 .navbar-nav.changecolormenu a.active {
 color: white !important;
 width: 10%;
 }

 .navbar-nav.changecolormenu li a:hover,
 .navbar-nav.changecolormenu li.active a {
 color: white !important;
 border-radius: 30px;
 background-color: #f6761c;
 }
 }

 @media (max-width: 768px) {

 }
</style>

<nav class="navbar navbar-light navbar-fixed-top">
 <div class="container-fluid d-flex">
 <div class="navbar-header">
 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar_menu" aria-expanded="false">
 <span class="fa fa-bars"></span>
 </button>
 <a href="#" class="navbar-brand">
 <img src="../site/img/simbolo.png" class="img-responsive">
 </a>
 <!--
 <a href="#" class="navbar-brand">
 <img src="../site/img/simbolo.png" class="img-responsive">
 Automatize Sistemas
 </a>
 -->
 </div>
 <div class="collapse navbar-collapse" id="navbar_menu">
 <ul class="nav navbar-nav navbar-right">
 <li><a class="" href="#mn_home">teste</a></li>
 <li><a class="" href="#mn_empresa">EMPRESA</a></li>
 <li><a class="" href="#mn_solucoes">SOLUCOES</a></li>
 <li><a class="" href="#mn_cases">CASES</a></li>
 <li><a class="" href="#mn_formulario">CONTATO</a></li>
 </ul>
 </div>
 </div>
</nav>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
 $(document).ready(function() {
 $(window).on('scroll', function() {
 if ($(window).scrollTop() >= 20) {
 $('.navbar').addClass('compressed');
 $('.navbar-nav').addClass('changecolormenu');
 $('.navbar-brand').addClass('changecolorlogo');

 } else {
 $('.navbar').removeClass('compressed');
 $('.navbar-nav').removeClass('changecolormenu');
 $('.navbar-brand').removeClass('changecolorlogo');
 }
 });
 });
</script>