Decidí escribir algo sobre algunas cosas que se van poniendo de moda como botones flotante, menus flotantes tipo facebook, algo más de ajax con jquery y cosas asi.
Veamos este boton se mantiene fijo en una parte de la pantalla aún mientras usamos el scroll de allí que sea muy útil para poner un botón RSS, algún banner con propaganda o tal vez una flecha para regresar al inicio, algunos los usan para menús, personalmente creo que para eso hay otra forma de maquetar o terminaremos teniendo un menu que se superponga al contenido.
La idea es muy simple aunque pueda dar problemas en IE6 (a ver si nos vamos olvidando de ese navegador) sin embargo hay hacks sencillos para el uso de position fixed en IE6.
Lo primero es colocar nuestra imagen (para este tutorial una de RSS) como si fuera un link, aunque no sólo podemos usar imágenes sino prácticamente cualquier cosa.
<a class='flotante' href='#' ><img src='boton-flotante.png' border="0"/></a>Y ahora para que aparezca fijo en pantalla usamos el siguiente estilo:
.flotante {
display:scroll;
position:fixed;
bottom:320px;
right:0px;
}Y eso es todo, no hace falta javascript ni gigantescos códigos que visto rondando la web.
¿Cómo hacerlo funcionar en IE6?
No soy fan de los hacks porque o no funcionan o lo hacen a medias, IE6 no reconoce el position fixed es necesario darle una manito agregando las siguientes líneas de código al inicio de nuestra hoja de estilos.
html
{
overflow-y: hidden;
}
html body
{
height: 100%;
overflow: auto;
}OJO: Al usar este hack positon:absolute deja de funcionar en IE6 y sólo funciona en el standards-compliant mode, osea si tienes un bloqueador de ads o algo así es probable que no funcione. No quería dar este hack porque es un poco tonto dar un código con tantos peros.
