Desarrollar menú con efecto scroll (cambio de color)

Este artículo pertenece a mi curso de Bootstrap 4 y es para compartir con ustedes un nuevo taller, es más cómodo explicar los códigos a utilizar en este formato pero de igual forma tienen el video para que sigan los pasos para desarrollar este menú.

Para comenzar a trabajar necesitamos tener instalada nuestra plantilla base de Bootstrap 4, esta contine un enlace a Jquery que es fundamental para desarrollar nuestro proyecto.

La plantilla base sería algo así:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap y Fonts CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- Estilos en Css -->
    <link rel="stylesheet" href="style.css">
        
  </head>
  <body>
    <!-- Aquí va nuestro contenido web -->

    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Ahora viene lo entretenido, vamos agregar unas líneas de Jquery para que detecte el scroll en nuestro sitio web, estas se colocan antes de finalizar el body o bien en un archivo aparte con extensión .js

<script>
      $(window).scroll(function() {
        if ($("#menu").offset().top > 56) {
            $("#menu").addClass("bg-inverse");
        } else {
            $("#menu").removeClass("bg-inverse");
        }
      });
</script>

Una pequeña explicación de los códigos:

Estamos abriendo una función que detecta el scroll en nuestra ventana, además tenemos una condicional if la cual dice que… si (if) el top de nuestro sitio web es mayor a 56 px, se le agrega una clase “bg-inverse” al elemento que tenga el identificado “#menu”.

En caso contrario (else), se elimina la clase “bg-inverse”.

Cabe señalar que para que esto funcione tienes que tener construido un menú (NavBar) con Bootstrap 4, y que en este caso tenga una clase distinta a “bg-inverse”.

Mi menú de ejemplo es el siguiente:

<nav class="navbar navbar-toggleable-md navbar-inverse bg-primary sticky-top" id="menu">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <a class="navbar-brand" href="#">Navbar</a>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="text" placeholder="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>

Para finalizar vamos agregar una transición con Css para que el cambio de color no se realice tan brusco, esto lo coloco en la clase “bg-primary”.

.bg-primary{
	transition: all 1s ease;
}

Tan tan, fácil ¿verdad?

Ya tendré tiempo para realizar un curso especial en jquery y animaciones con Css por si estás muy perdido, además te recomiendo ver el video para simplicar el proceso.

Saludos y nos vemos en el siguiente video tutorial 🙂