• #Aplicaciones
  • #Bases de datos
  • #Dispositivos
  • #Hardware
  • #Inversión
  • #Marketing
  • #Programacion
  • #Sistemas
  • Cambiar un elemento al hacer scroll con jQuery

    TutorialesJavascriptjQueryProgramacion

    En este tutorial vamos a ver cómo puedes modificar un elemento de la interfaz a medida que haces scroll por la página. Para ello usaremos la librería jQuery. En caso de que no sepas utilizar jQuery, consulta primero el tutorial de introducción a jQuery, en donde aprenderás a instalarlo y a utilizarlo.

    En algunas ocasiones querrás cambiar algún elemento de la página cuando te desplazas por ella; algo muy habitual en los menús de navegación. En este caso, modificaremos la parte correspondiente al menú de navegación de la página al llegar a un determinado punto. Cambiaremos el color y haremos que el menú se mantenga fijo en la parte superior de la página, aunque también podrías modificarlo de otro modo, como por ejemplo haciendo que sea más estrecho.

    Antes de comenzar, asegúrate de incluir el script de jQuery en tu proyecto.

    Versión simplificada

    Primero vamos a agregar el código HTML, que simplemente consistirá en un menú y en un elemento que será el que marque el cambio. Ya hemos visto en otro tutorial cómo crear un menú dropdown con jQuery, así que en este caso nos limitaremos a representarlo del modo más sencillo posible:

    <nav>Menú</nav>
    
    <div id="cambio">Punto de cambio</div>

    Ahora vamos a agregar el código jQuery, que ejecutará la siguiente función cada vez que hagamos scroll:

    $(window).on("scroll", function () {
      if ($(window).scrollTop() > $("#cambio").offset().top - 50) {
        $("nav").addClass("active");
      } else {
        $("nav").removeClass("active");
      };
    });

    Lo que hemos hecho es comprobar si se ha llegado al elemento #cambio haciendo scroll. Para ello comparamos la altura a la que está el elemento #cambio con la distancia recorrida haciendo scroll y, en caso de ser esta última distancia mayor, agregamos la clase .active el menú. De lo contrario, eliminamos la clase .active.

    Ahora vamos a agregar los estilos CSS, en los que también definiremos la posición de los elementos:

    html {
      height: 800px;
    }
    
    nav {
      position: fixed;
      top: 0;
      width: 100%;
      background: #000;
      color: #fff;
      height: 50px;
      line-height: 50px;
      transition: .3s all ease;
    }
    
    nav.active {
      background: blue;
    }
    
    #cambio {
      margin-top: 300px;
      border-top: 1px solid blue;
    }

    Y con esto ya tendríamos la funcionalidad deseada. Puedes ver el resultado en funcionamiento aquí.

    Versión avanzada

    Ahora vamos a hacer que el resultado que hemos obtenido sea algo más atractivo visualmente hablando. Vamos a agregar una cabecera para agregar algo de espacio:

    <nav>Menú</nav>
    
    <header></header>
    
    <div id="cambio">Punto de cambio</div>

    Y ahora también agregaremos estos estilos CSS:

    html {
      min-height: 100%;
      font-family: 'Nunito', sans-serif;
    }
    
    body {
      line-height: 1.6;
      margin: 0;
      padding: 0;
    }
    
    nav {
      text-align: center;
      position: fixed;
      top: 0;
      width: 100%;
      background: transparent;
      color: #fff;
      padding: 0 1rem;
      font-size: 1.8rem;
      height: 80px;
      line-height: 80px;
      transition: .3s all ease;
    }
    
    nav.active {
      background: #108040;
    }
    
    header {
      height: 50vh;
      background: #7db4fc;
    }
    
    #cambio {
      height: 150vh;
      padding: 60px 0;
      text-align: center;
      color: #fff;
      background: #111;
    }

    Si quieres, puedes ver el resultado en funcionamiento aquí.

    Y esto ha sido todo.


    Avatar de Edu Lazaro

    Edu Lázaro: Ingeniero técnico en informática, actualmente trabajo como desarrollador web y programador de videojuegos.

    👋 Hola! Soy Edu, me encanta crear cosas y he redactado esta guía. Si te ha resultado útil, el mayor favor que me podrías hacer es el de compatirla en Twitter 😊

    Si quieres conocer mis proyectos, sígueme en Twitter.

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *