Div flotante con jQuery [scroll]

Posted on Actualizado enn


Vamos a ver como podemos capturar el momento en el que se hace uso de las barras de desplazamiento ya sea de la página actual o de un elemento particular, realmente con jQuery es bastante sencillo, solo se debe agregar un manejador al evento scroll de un elemento determinado.

La sintaxis general es:

 1: $("selector").scroll(function(){
 2:     // código javascript
 3: })

En el caso de querer capturar el evento scroll para la página usamos como selector window, es decir:

 1: $(window).scroll(function(){
 2:     alert('Ha cambiado la posición del scrollbar de la página !');
 3: })

Pero bueno, mostrar mensaje al usuario cuando se cambia la posición del scroll como que no es lo más interesante del mundo, así que vamos a realizar un panel flotante que va a ser siempre visible, y para este caso vamos a aplicar una animación para que cuando el div se mueva se vea mucho más agradable para el usuario. Si quieres antes de seguir revisa este post sobre animaciones en jQuery.

Así que el código jQuery necesario para lograr dicho efecto es:

 1: $(function () {
 2:     $(window).scroll(function () {
 3:         $("#divFlotante")
 4:             .stop()
 5:             .animate({
 6:                 top: $(document).scrollTop()
 7:                 }, 700, 'easeOutBounce'
 8:             );
 9:     });
 10: })

En la  línea 2 capturamos el evento scroll de la ventana, en la siguiente línea hacemos referencia al div que queremos se mueva la cambiar la posición de la ventana, en la línea 4 le decimos stop() para q detenga la animación en caso que alguna todavía se este ejecutando, y de la línea 5 – 8 usamos el evento animate para cambiar el top del div, y agregar el efecto easeOutBounce, si no recuerdas como utilizar dicho animación revisa este post.

Un punto interesante de este ejemplo es la declaración del código para el divFlotante, como se aprecia solo lo utilizamos una vez pero para dos eventos distintos, para realizar esto simplemente usamos un .evento y solo utilizamos el punto y coma para el último evento declarado de dicho selector.

Como siempre les dejo el código del ejemplo.

Descarga del ejemplo !

11 comentarios sobre “Div flotante con jQuery [scroll]

    nicoloco93 escribió:
    05/31/2011 en 16:04

    Ahhh que facil es aplicar efectos especiales con jQuery!!😀

    david greco escribió:
    06/03/2011 en 03:54

    Julio Avellaneda, disculpas por el offtopic, pero queria preguntarte si tendrias algun problema en que haga una consulta muy sencilla aqui en los comentarios referida a otro tema, relacionado con Visual Basic y PHP.
    Saludo.

    Ego Ipse escribió:
    11/22/2011 en 15:55

    Está interesante. ¿¿Dónde se puede ver un ejemplo??

    Ego Ipse escribió:
    11/22/2011 en 18:48

    Me funcionó en mi página de pruebas, pero no en el sitio principal. Seguramente está en conflicto con algún otro script o el dibujo de los navegadores no procesan adecuadamente las cajas. Lo cierto es que no funciona con todo lo demás. ¿Alguna sugerencia?

      Julio Avellaneda respondido:
      11/23/2011 en 07:12

      podrías revisar si depronto tienes alguna referencia mal, o si de casualidad estas referenciando dos veces algún script, la versión de jQuery q usas es la misma?

        Ego Ipse escribió:
        11/23/2011 en 12:51

        Gracias por el tiempo y la respuesta.

        Uso la misma versión en la página de pruebas y en la página oficial, que es la última publicada en el repositorio de scripts de google (http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js). Además, una función evita que se cargue cualquier otra versión de JQuery distinta a la última.

        VOy a seguir revisando cuál puede ser el inconveniente. Firebug informa que todo está ok.

        Ya comento cualqueir avance.

        Es un gran efecto.

        Muchas gracias por compartirlo.

        Saludos…

    Jose Alejandro Realza escribió:
    07/03/2013 en 17:32

    Excelente codigo simple limpio y sencillo

    Jose Alejandro Realza escribió:
    11/10/2013 en 13:26

    Esta sumamente sencillo, resumido y efectivo!

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s