Change background menu css scroll on

Asked

Viewed 27 times

1

Good evening, I’m racking my brain trying to change the background color when using the scroll but I haven’t succeeded yet.

The menu code is:

<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>

Javascript is:

<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;
   }
  • What would be the problem? The code seems to be working normal.

  • See that you are applying an almost invisible opacity.

  • It worked, the old code was in trouble. Thank you!

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.