Caja flotante Jquery

En este tutorial vamos a crear una caja flotante que se desplaza a medida que se hace scroll por la página. De ese modo el contenido de lo que haya en su interior siempre estará visible. Lo mejor es ver un ejemplo.

Ver ejemplo en funcionamiento » »

Lo primero es situar la caja al final de la página. Por ejemplo, justo antes del final del BODY. 

Code

<div id="caja_flotante">
         <div id="cont_caja_flotante">
             <a href="#"><img src="images/facebook.png" alt="facebook" /></a>
             <a href="#"><img src="images/twitter.png" alt="twitter" /></a>
             <a href="#"><img src="images/flickr.png" alt="flickr" /></a>
         </div>
  </div>

En las propiedades CSS de esta caja la situamos en una posición absoluta:

Code

#caja_flotante{
         position: absolute;
         top:0;
         left: 10px;
         border: 1px solid #CCC;
         background-color: #F2F2F2;
         width:100px;
}

Ahora tan sólo queda recurrir a jQuery:

Code

$(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
                  });
              };
          });
});