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](http://api.jquery.com/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](http://julitogtu.wordpress.com/2011/05/14/jquey-animation/) sobre [animaciones en jQuery](http://julitogtu.wordpress.com/2011/05/14/jquey-animation/). Así que el código [jQuery](http://jquery.com/) 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 lalí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 !