0

Tengo la siguiente navegación fija que al cargar el index esta con transparencia y solo muestra las secciones. Me gustaría que al bajar se pueda colorear esa navegación de blanco para que se pueda distinguir pero no logro hacerlo con css, mi código es el siguiente:

 nav

 <!-- Navbar Start -->
<nav class="navbar navbar-expand-lg fixed-top navbar-custom navbar-light sticky">
    <div class="container">
        <a class="navbar-brand" href="#">
            <img src="images/logopatrosa2.png" height="100" alt="">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse"
            aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="mdi mdi-menu"></span>
        </button>
        <!--end button-->

        <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav navbar-nav-link mx-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#home">Inicio</a>
                </li>
                <!--end nav item-->
                <li class="nav-item">
                    <a class="nav-link" href="#about">Nosotros</a>
                </li>
                <!--end nav item-->

                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="" id="navbarDropdownMenuLink"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Productos
                    </a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="blondas.html">Blondas</a>
                        <a class="dropdown-item" href="">Item1</a>
                        <a class="dropdown-item" href="">Item2</a>
                        <a class="dropdown-item" href="">Item3</a>
                        <a class="dropdown-item" href="">Item4</a>
                    </div>
                </li>
                <!--end nav item-->

                <li class="nav-item">
                    <a class="nav-link" href="#news">Blog</a>
                </li>
                <!--end nav item-->
                <li class="nav-item">
                    <a class="nav-link" href="#contact">Contacto</a>
                </li>
                <!--end nav item-->
            </ul>

            <ul class="list-unstyled mb-0 mt-2 mt-sm-0 social-icon light-social-icon">
                <li class="list-inline-item"><a onclick="location.href='://www.facebook.com/bmyfb/'"><i
                            class="mdi mdi-facebook"></i></a></li>

                <li class="list-inline-item"><a onclick="location.href='https://www.instagram.com/myinsta/'"><i
                            class="mdi mdi-instagram"></i></a></li>
            </ul>
        </div>
    </div>
    <!--end container-->
</nav>
<!-- Navbar End -->

CSS

.navbar-custom {
 padding: 20px 0;
 width: 100%;
 border-radius: 0px;
 z-index: 999;
 margin-bottom: 0px;
 -webkit-transition: all 0.5s ease-in-out;
 transition: all 0.5s ease-in-out;
 }

.navbar-custom .navbar-toggler {
 color: #272727;
 font-size: 30px;
 padding: 0px;
 }

.navbar-custom .navbar-brand {
 margin-right: 0 !important;
 }

.navbar-custom .navbar-brand .l-dark {
 display: none;
 }

 .navbar-custom .navbar-brand .l-light {
 display: inline-block;
 }

 .navbar-custom .navbar-nav .nav-item .nav-link {
 color: #ffffff;
 font-size: 13px;
 background-color: transparent !important;
 margin: 0 8px;
 font-weight: 500;
 letter-spacing: 1px;
 line-height: 24px;
 text-transform: uppercase;
 -webkit-transition: all 0.5s;
 transition: all 0.5s;
  font-family: "Poppins", sans-serif;
 }

.navbar-custom .navbar-nav .nav-item .nav-link:hover, .navbar-custom .navbar-nav .nav-item .nav-link:active {
 color: #c52c20;
}

.navbar-custom .navbar-nav .nav-item.active .nav-link {
color: #c52c20 !important;
}

.navbar-custom .navbar-nav.navbar-nav-link .nav-item .nav-link {
 color: #272727;
 }

 .navbar-custom .navbar-nav.navbar-nav-link .nav-item .nav-link:hover, 
 .navbar-custom .navbar-nav.navbar-nav-link .nav-item .nav-link:active {
 color: #c52c20;
 }

.navbar-custom .navbar-nav.navbar-nav-link.active .nav-link {
 color: #c52c20 !important;
 }
.navbar-custom .navbar-nav .nav-item:last-child .nav-link {
 margin-right: 0;
 padding-right: 0;
 }

.navbar-custom .social-icon {
  margin: 0 0 0 8px;
 }

.navbar-custom .social-icon li a {
 color: #272727;
 border-color: #272727;
 }

.navbar-custom .social-icon.light-social-icon li a {
 color: #e9ecef;
border-color: #e9ecef;
}

.nav-sticky.navbar-custom {
margin-top: 0px;
padding: 12px 0px;
background-color: #ffffff;
-webkit-box-shadow: 0 10px 33px rgba(0, 0, 0, 0.1);
      box-shadow: 0 10px 33px rgba(0, 0, 0, 0.1);
color: #272727 !important;
}

.nav-sticky.navbar-custom .navbar-brand {
 margin-right: 0 !important;
 }

.nav-sticky.navbar-custom .navbar-brand .l-dark {
  display: inline-block;
  }

.nav-sticky.navbar-custom .navbar-brand .l-light {
 display: none;
 }

 .nav-sticky.navbar-custom .navbar-nav {
margin-top: 0px;
 }

 .nav-sticky.navbar-custom .navbar-nav .nav-item .nav-link {
  color: #2f3545 !important;
 }

 .nav-sticky.navbar-custom .navbar-nav .nav-item .nav-link:hover, .nav- 
 sticky.navbar-custom .navbar-nav .nav-item .nav-link:active {
 color: #c52c20 !important;
}

 .nav-sticky.navbar-custom .navbar-nav .nav-item.active .nav-link {
 color: #c52c20 !important;
 }

.nav-sticky.navbar-custom.sticky-light {
 background-color: #ffffff;
 }

 .nav-sticky .navbar-brand {
  color: #272727 !important;
 }

 .nav-sticky .social-icon.light-social-icon li a {
  color: #272727;
  border-color: #272727;
  }

1 respuesta 1

0

Lo puedes lograr mediante 2 elementos

  • Evento scroll mediante un listener al objeto document
  • Recuperamos un una variable el scroll sobre el eje Y o vertical al objeto window
  • El uso de scrollYnos regresa la cantidad de pixeles que nos desplazamos por lo tanto con una estructura de condicionales podemos solventar escribiendo rangos de los mismos para modificar el color agregando una clase con un background-color específico

Ejemplo

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Ejemplo</title>
      <style>
        .color-rojo {
          background-color: red;
          height: 1600px;
        }
        .color-verde {
          background-color: green;
          height: 1600px;
        }
        .contenedor-menu__contenedor {
          height: 1600px;
        }
        .color-amarillo {
          height: 1600px;
          background-color: yellow;
        }
      </style>
    </head>
    <body>
    <main class="contenedor-menu">
      <nav class="contenedor-menu__contenedor">
        Menú de navegación
      </nav>
    </main>
    <script>
      class Color {
        constructor(lienzo, scrollAbajo) {
          this.lienzo = lienzo
          this.scrollAbajo = scrollAbajo
        }
        
        cambiaColor() {
          document.addEventListener("scroll", () => {
          let scrollAbajo = window.scrollY;
          (scrollAbajo >= 0 && scrollAbajo <= 500) ? this.lienzo.setAttribute("class", "color-rojo")
          : (scrollAbajo > 500 && scrollAbajo <= 1000) ? this.lienzo.setAttribute("class", "color-verde")
          : this.lienzo.setAttribute("class", "color-amarillo")
          })
        }
      }
      let lienzo = document.querySelector(".contenedor-menu__contenedor")
      let scrollAbajo = window.scrollY
      const color = new Color(lienzo, scrollAbajo)
      color.cambiaColor()
    </script>
    </body>
    </html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.