Jquery StickyBox

Plugin para jquery que genera bloques flotantes que siguen al usuario cuando se desplaza la página. Utiliza posicionamiento absoluto para reajustar la posición en base a los estilos css iniciales.

Por ejemplo, se podría usar en los siguientes casos:

• Para realizar carritos de compras que muestran información de la compra actual
• En caso de querer añadir botones sociales (facebook, twitter..)
• Para generar menús flotantes

Requerimientos e Instalación

El plugin requiere tanto de jquery como de jquery easing.

Los scripts js requeridos son:

    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
    <script src='js/stickysidebar.jquery.min.js'></script>

Por ejemplo, el código html para un carrito de compras flotante podría ser:

    <aside id="sidebar">
      <div id="basket">
        <h3>Carrito de compras</h3>
        <p id="items" class='zero-items'>0</p>
      </div>
    </aside>

E inicializaríamos el plugin mediante:

::jquery
$("#sidebar").stickySidebar({
    timer: 200,
    easing: "easeInOutQuad",
    padding: 50
});

En su sitio web podremos ver con un poco de más de detalle los parámetros disponibles y un par de ejemplos del mismo.

A modo de práctica yo repliqué el primero de sus ejemplos (carrito de compras) con algunos detalles adicionales, el cual puede verse aquí.

Código en github del plugin: sticky-sidebar-jquery-plugin

Código en bitbucket de la demo que realizé: demo (el directorio es: sticky-sidebar-jquery-plugin)