SummArg | Cursos y recursos para webmasters

29/09/2011

¿Cómo hacer una caja flotante que sigue al scroll con jQuery Portamento?

Portamento es un plugin jQuery que nos permite colocar una caja flotante en diferentes partes de nuestro documento con la novedad de que la misma mantendrá su posición a medida que el usuario mueva la página en diferentes direcciones (scroll).

Su modo de uso es muy sencillo, primero descargamos el plugin y lo vinculamos al documento (recuerden vincular jQuery también!) antes del cierre de la etiqueta </body>, así como también indicamos a que ID habrá de aplicarse el script.

<script src="portamento.js"></script>
<script type="javascript">
$('#ejemplo').portamento();
</scritp>

Luego un poco de CSS

#portamento_container {
	float:right;
	position:relative;
}
#portamento_container #ejemplo {
	float:none;
	position:absolute;
}
#portamento_container #ejemplo.fixed {
	position:fixed;
}

Y finalmente nuestro código HTML:

<div id="ejemplo">
<p>Este es un ejemplo!</p>
</div>

Portamento | Demo

 

$('#example').portamento();

Dejar un comentario

  1. Aridio

    Genial! creo que es el mismo plugin que tiene facebook en la caja de “amigos que quizás conozcas” y donde salen algunas publicidades, pero algo que no entiendo es porqué en Joomla no funciona adecuadamente en ciertas zonas o.O

Dejar un comentario