JMiur [E]

Una forma muy simple de usar la librería jQuery para generar un caja flotante que se desplaza a medida que hacemos scroll sobre la página.

El HTML conviene ponerlo antes de </body> porque lo vamos a posicionar de manera absoluta así que debe estar fuera de cualquier otro contenedor que tenga la propiedad position:relative y dentro de ese DIV agregaremos cualquier cosa, en este caso, enlaces con íconos:
<div id="caja_flotante">
  <div id="cont_caja_flotante">
    <a href="#"><img src="URL_IMAGEN_1" /></a>
    <a href="#"><img src="URL_IMAGEN_2" /></a>
    <a href="#"><img src="URL_IMAGEN_3" /></a>
  </div>
</div>
Y las reglas de estilo que ponemos antes de &/head>:
<style>
#caja_flotante{
  left: 0; /* o le damos un valor para separarlo del borde izquierdo de la ventana */
  position: absolute;
  top: 0;  /* o le damos un valor para separarlo del borde superior de la ventana */
  width: ANCHOpx; /* definimos su ancho */
  /* cualquier otra propiedad gráfica como background, border, etc */
}
</style>
Y por debajo de eso, el script:
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
  var posicion = $("#caja_flotante").offset();
  var margenSuperior = 15;
  $(window).scroll(function() {
    if ($(window).scrollTop() > posicion.top) {
      $("#caja_flotante").stop().animate({
        marginTop: $(window).scrollTop() - posicion.top + margenSuperior
      });
    } else {
      $("#caja_flotante").stop().animate({
        marginTop: 0
      });
    };
  });
});
//]]>
</script>
El ejemplo online puede verse en esta página donde, en lugar de posicionarlo a la izquierda de la ventana del navegador, lo he ubicado a la izquierda del DIV contenedor del blog que en este caso es #outer-wrapper y como sé que mide 600 pixeles de ancho, la imagen se coloca en el centro de la pantalla y luego, se la desplaza hacia un lado, un poco más que la mitad del ancho de ese contenedor:
<style>
#caja_flotante{
  left: 50%;
  margin-left: -370px;
  position: absolute;
  top: 50px; 
  width: 64px;
}
</style>

REFERENCIAS:webintenta.com

15 comentarios:

América Quinteros  

Muchísimas gracias JMiur pondré por fin colocar los botones de las redes sociales :)

Responder
Banco de Imágenes Gratuitas  

@Vagabundia,
Me parece excelente esta cajita flotante con los botones sociales.
Por cierto, tienes cambiadas las direcciones en ellos.
En facebook tienes el de twitter y viceversa.

Saludos.

Responder
Adrián J. Messina  

Muy bueno, es de mucha utilidad. :D

Responder
Alejandro  

Muy bueno JMiur! pero se me ocurre que sería genial si pudieras posicionar en un primer momento la caja en un top:250px por ejemplo, y que la caja empezase a bajar con el usuario a medida que use el scroll pero a no siempre con top250 sino por ejemplo a 50px. ¿es posible? no sé si me he explicado muy bien :d

saludos!

Responder
Isra  

Me parece genial tu aporte, muy útil y extremadamente sencillo y claro, muchas gracias.

Responder
Red Cloud  

Excelente tutorial, gracias :D

Responder
QuerOrule  

necesito ayuda, requiero la libreria de jquery?

JMiur  

Sí. Para usar lo que indica la entrada, se requiere jQuery.

Responder
Tadeo Calderón  

¡Excelente articulo!. Esta buscando algo así porque el código que me da Share This no funciona cuando tengo varios archivos .inc que terminan formando la página index. Ya hice una prueba y funciona. Ahora me queda probar con los botones sociales.

Éxitos.

Responder
Jesús Torralba Pérez  

Hola JMiur.
Conozco algo de Jquery, y he intentado implantar estas ventanas flotantes, pero algo me falta que no llega a moverse.

Entiendo que necesito la librería JQuery y tengo en el servidor el jquery.jplayer.min.js pero no me funciona.

El enlace es este:
http://www.marketingprodigioso.com/pro/sobre-nosotros/index.htm

Te agradecería tu ayuda, de cual es lo que me faltaba.
Te escribo desde una cuenta de Gmail, pero la que utilizo es esta:
jesus[a]marketingprodigioso com

Muchísimas gracias por adelantado.
Jesús Torralba

JMiur  

No veo el script colocado en tu sitio.

Tampoco se qué es el jquery.jplayer.min.js y ese script provoca un error en el navegador.

Responder
Vinicio Roberto  

hola! y felicitaciones por el tutorial, pero me puedes explicar por favor como hay que implementar la libreria JQUERY?

JMiur  

SImplemente, la debes cargar; por ejemplo, desde los repositorios de Google:

http://vagabundia.blogspot.com/2013/01/actualizacion-de-jquery-y-posibles.html

Responder
miguel francisco ramos salgado  

una preguna buenisimo aporte y si lo quiero poner arriba horizontalmente que balla siempre arriba gracias

JMiur  

En ese caso no requiere un script. Fíjate en esta entrada.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR