Boa noite, estou quebrando a cabeça tentando mudar a cor do fundo ao usar o scroll mas ainda não obtive êxito.
O código do menu é:
<header class="xs-header-section xs-header-height header-main-version">
<div class="container">
<nav class="xs-menus -menu -menu-v2">
<div class="nav-header">
<div class="nav-toggle"></div>
<a class="nav-brand nav-logo" href="index-v2.html">
<img src="assets/images/logo_new.png" alt="">
</a>
</div>
<div class="nav-menus-wrapper">
<ul class="nav-menu">
<li><a href="#">PÁGINA INICIAL</a></li>
<li><a href="#">SOBRE NÓS</a></li>
<li><a href="#l">CAMPANHAS</a></li>
</ul>
<div class="xs-logo-wraper hidden-mobile">
<a class="nav-brand xs-logo -logo-v2" href="index-v2.html">
<img src="assets/images/logo_new.png" alt="">
</a>
</div>
<ul class="nav-menu">
<li><a href="#">LOJAS</a></li>
<li><a href="#">MARCAS</a></li>
<li><a href="#">FALE CONOSCO</a></li>
</ul>
</div>
</nav>
</div>
</header>
O javascript é:
<script>
jQuery(document).ready(function($) {
$(window).scroll(function() {
var scrollPos = $(window).scrollTop(),
navbar = $('.header-main-version');
if (scrollPos > 10) {
navbar.addClass('fixednav');
} else {
navbar.removeClass('fixednav');
}
});
});
</script>
CSS:
.header-main-version {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
}
.header-main-version.fixednav{
background:#ffffff;
opacity:0.3;
}