Alexander A. E.Django developer

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:

$("#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í.

demo-img

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)

Comentarios !

comments powered byDisqus