Luego de las fiestas de año nuevo – feliz año nuevo a todos los lectores del blog – 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 imágen (para este tutorial una de RSS) como si fuera un link, aunque no sólo podemos usar imágenes sino prácticamente cualquier cosa.
Y ahora para que aparezca fijo en pantalla usamos el siguiente estilo:
1 2 3 4 5 6 | .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.
Interesante, seria mucho muy diferente lo contrario? es decir que se moviara con el scroll
En vez de usar position:fixed, ponle position:absolute
Muy bueno, siempre tube la duda como ponian esos botones flotanto, a ver ando algo olvidado de css fixed queda un objeto quieto nada mas no?
Exactamente fixed lo deja quieto en un punto especifico de la pantalla, absolute lo pone en un punto de la pantalla pero afectado por el scroll, relative es el que anda por defecto. Fixed también puede ser usado en fondos para crear algunos efectos interesantes.