1

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;
   }
3
  • Qual seria o problema? O código parece estar funcionando normal.
    – Sam
    Commented 23/03/2018 às 22:56
  • Veja que você está aplicando uma opacidade quase invisível.
    – Sam
    Commented 23/03/2018 às 22:57
  • Já deu certo, o código antigo estava com problema. Obrigado! Commented 23/03/2018 às 23:15

0

Pesquise outras perguntas com a tag .