Cómo crear un banner flotante

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

Aunque el artículo se centra en cómo crear un banner flotante al margen de la web, también se puede aplicar a otras necesidades como por ejemplo, agregar botones para compartir en redes sociales.

Con este método ayudamos a que nuestro banner se muestre en pantalla siempre al visitante de la web, independientemente de que haga scroll en el contenido, el banner se desplazará automáticamente hasta el punto donde se muestre por completo.

Lo primero es situar la caja al final de la página. Por ejemplo, justo antes del final de la etiqueta <body> cambiando la URL del anunciante y la imagen del banner:

<div id="caja_flotante">
<div id="cont_caja_flotante">
<a href="http://www.url-del-anunciante.com/"><img src="/banner.gif" alt="banner" /></a>
</div>
</div>

El siguiente paso será crear el diseño de la caja: color, borde, fondo y asignar una posición absoluta (en este caso alineado a la izquierda):

#caja_flotante{
position: absolute;
top:0;
left: 5px;
border: 1px solid #000000;
background-color: #DFDFDF;
width:100px;
}

Para terminar, sólo nos quedará darle el movimiento a la caja con el banner en su interior, para ello añadir el siguiente código jQuery:

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

Un comentario

  1. Pablo dijo:
    17 octubre, 2012
    Responder

    Muy bueno, trate de hacer que me quede abajo en vez de arriba pero me fue imposible!, como tengo que hacer? gracias!

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.