Caja flotante que sigue al scroll

Email this to someoneShare on FacebookShare on Google+Share on LinkedInTweet about this on Twitter

Una de las modas en los últimos tiempos para el diseño de web, es la de añadir una caja flotante que se mantiene siempre visible para el usuario, aunque se realice scroll sobre el contenido. En muchas webs se puede encontrar en ella: el menú completo de la web, los botones para compatir en redes sociales o simplemente una caja con nuestro perfil que permanecerá siempre visible.

Con el plugin jQuery Portamento, nos resultará muy sencillo colocar una caja flotante en diferentes partes de nuestra web (derecha, izquierda, arriba o abajo) sabiendo que la caja con el contenido mantendrá siempre su posición a medida que el usuario realice scroll en la página.

Portamento

Para comenzar a utilizarlo en nuestra web primero descargamos el plugin y realizamos las llamadas a portamento.js antes del cierre del tag </body> de nuestra web, así como también indicamos a que ID habrá de aplicarse el script.


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

El siguiente paso es dar formato a nuestra caja por medio de CSS:

#portamento_container {
	float:right;
	position:relative;
}

#portamento_container #example {
	float:none;
	position:absolute;
}

#portamento_container #example.fixed {
	position:fixed;
}

Para finalizar añadimos el código HTML donde deseamos mostrar la caja flotante en nuestra web:

<div id="ejemplo">
<p>Esto es un ejemplo de caja flotante en ZonaW.com</p>
</div>

Sé la primera persona en comentar

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

De conformidad con lo establecido en la LOPD, Adpv Advertising Provider S.L. garantiza la adopción de las medidas necesarias para asegurar el tratamiento confidencial de los datos de carácter personal. Así mismo le informamos de la inclusión de sus datos en un fichero con la finalidad de mantener su relación negocial o contractual con Adpv Advertising Provider S.L. y de la posibilidad de ejercer los derechos de acceso, rectificación, cancelación y oposición en la siguiente dirección: Ercilla, 26, 1Dcha., 48011, Bilbao, Bizkaia. Privacidad.