El Blog de MoNKi, buscando la mezcla entre diseño y programación
Últimas noticias
Entrada
Sindicación
| Arreglando "position: fixed" en Internet Explorer |
| miércoles, 09 mayo 2007 | |
|
Recientemente, para la web del CESLCAM , me he visto con la necesidad de hacer una barra de menú fija en la parte superior de la página. Esto es relativamente sencillo en cualquier navegador... menos en Internet Explorer. El problema es que IE no soporta el valor "fixed" para el atributo "position" de los estilos CSS hasta la versión 7 que ya lo arregla, pero claro, mucha gente todavía usa la versión 6, algunos incluso la 5. Investigando encontré un montón de soluciones usando JavaScript, cosa que no me acababa de convencer, mayormente porque se notaban saltitos al hacer scroll de la página hasta que se volvia a reposicional la barra, hasta que encontré este documento de Mark "Tarquin" Wilton-Jones, que mucha gente ya conocerá, pero que yo desconocía. La solución que nos da es usar 'expression', una extensión no estandar de Microsoft al CSS. Lo que esta extensión nos permite es usar código Javascript para obtener valores dinámicos en el CSS, por tanto estas expresiones son calculadas cada vez que cambia algo en la página que necesita ser redibujado, por lo que no se notan saltitos ni esperas, pero quedamos expuestos a que el Javascript esté deshabilitado, para lo cual haremos que en este caso se quede normalito, sin quedarse la barra fija arriba, pero sin que se desmonte la página... Arreglando 'position: fixed'El tema es sencillo, simplemente se indica dentro de 'expression' un código que nos calcule donde debe estar la barra y listo, por ejemplo: div#dejar_fijo{
position: absolute; top: expression( (3 + 3) + 'px'); } Nos pondrá el div con identificador "dejar_fijo" a 6 pixels desde la parte superior, en este caso de la página no de la ventana. Para dejarlo en la parte superior de la ventana lo que haremos es obtener el valor de scroll y asignarselo a la posicion "top", tan sencillo como esto, o casi. div#dejar_fijo{
position: absolute; top: expression( document.body.scrollTop + 'px' ); } En principio debería funcionar, pero no lo hace. El problema ahora es que por un fallo en IE el valor de esa propiedad debe asignarse a una variable para que pueda ser usada, con ese código obtenemos algo como '0px', sin embargo con este otro ya la cosa va mejor: div#dejar_fijo{
position: absolute; top: expression( (ignorar = document.body.scrollTop) + 'px' ); } A parte tenemos que en modo compatible con estandares de IE 6, el valor debe cogerse de document.documentElement.scrollTop, con lo que cambiamos esa linea por esta condicional: div#dejar_fijo{
position: absolute; top: expression( (ignorar = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + 'px' ); } Listo, ya lo teneis anclado a la parte superior de la ventana. Ahora si por ejemplo lo quereis poner a 6px desde arriba de la ventana solo teneis que sumarle 6px a eso: div#dejar_fijo{
position: absolute; top: expression( 6 + (ignorar = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + 'px' ); } Si se quiere dejar más seguro por si Javascript está desactivado, se puede poner una doble propiedad, una con un valor normal y otro con la 'expression'. div#dejar_fijo{
position: absolute; top: 6px; top: expression( 6 + (ignorar = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + 'px' ); } Todo esto yo lo metería entre condicionales de Internet Explorer '<!--[if lte IE 6]>' para evitar problemas con los validadores CSS, dejando un archivo CSS con las cosas como deben ser, es decir con 'position: fixed', y otro CSS solo para IE. Arreglando 'background-attachment: fixed'Hasta ahí todo bien para dejar fija la barra superior, ahora el segundo problema que tenemos es que el fondo de la página también debía estar fijo cuando alguien hiciera scroll, y con lo aprendido anteriormente pues podemos hacerlo de forma similar usando las propiedades no estandar de Microsoft 'background-position-x' y 'background-position-y' junto a la ya mencionada 'expression'. Al parecer estas propiedades 'background-position-x' y su análoga vertical fueron propuestas para CSS3 por Microsoft, aunque no las he visto por ninguna parte. Pues manos a la obra: div#dejar_fondo_fijo{
background-image: url(imagen_fondo.jpg); background-position-y: 6px; background-position-y: expression( ( 6 + ( ignorar = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' ); } Esto nos dejará el fondo fijo a 6 pixels de la parte superior de la ventana, con lo que nos queda todo solucionado. Y recordar, poner esto entre comentarios de IE, esto es solo para él y no queremos que los demás salgan locos. Trackback(0)
Comments (15)
  written by Chema, 02 de junio de 2007
Hola, estoy intentando hacer lo mismo pero con una barra que se situe en la parte inferior en vez de en la parte superior pero no lo consigo... sabes como se podría hacer?
 written by MoNKi, 02 de junio de 2007
Prueba con algo como esto:
#barra_inferior { Y entre condicionales para versiones anteriores a IE 7: #barra_inferior { written by MoNKi, 02 de junio de 2007
Mmmm... a ver que le pasa a los comentarios que no me deja poner el signo de sumar, jeje.
written by Chema, 05 de junio de 2007
Hola, he estado probando la solución y tiene un comportamiento un tanto extraño. El caso es que parece salir bien, pero cuando bajas el scroll éste se hace más pequeño y sigue bajando hasta el infinito aunque no haya más contenido en la página. De todas formas no te quiero molestar seguro que es alguna chorrada que se me ha escapao por ahí.
Gracias. written by MoNKi, 05 de junio de 2007
Eso me pasaba a mi cuando no ponía bien el alto de la barra, asegurate de que se le resta exactamente el alto de la barra, supongo que incluyendo margenes y demás.
written by Chema, 09 de junio de 2007
Aunque estoy pensando que lo mismo es por el contenido de la capa. Puede ser?
Juer... el ie este me vuelve loco written by MoNKi, 10 de junio de 2007
Pues así sin verlo no sabría decirte, pero en principio el contenido de la capa no debería influir, solo el "div" que estas posicionando, lo de dentro poco debería importar.
¿Hay alguna posibilidad de echarle un vistacillo? written by Chema, 13 de junio de 2007
Claro, pero te importa si te mando la url por mail? para que no se quede aquí? es un pequeño proyectillo secreto :-)
written by Chema, 15 de junio de 2007
Exacto, va como la seda :-) ... todo era problema de mi inexperiencia con CSS
Muchísimas gracias de nuevo.  written by Rubén S., 04 de julio de 2007
¿ Cómo lo solucionaron ? Hoooola estoy haciendo las pruebas y me pasó exáctamente lo mismo, ¿ Que era ?
written by Rubén S., 04 de julio de 2007
Hooola estoy tratando de hacer lo mismo, pero tengo el mismo problema, ¿ me podrían ayudar ?
written by MoNKi, 04 de julio de 2007
Rubén, el problema de Chema era específico de su CSS, así que no creo que te pueda resolver nada decirte lo que le fallaba a el.
Aun así el problema era que hacia posicionamientos relativos dentro del div que intentaba dejar fijo y los elementos en cuestión se salian del div por debajo, lo que hacia que el alto total fuera superior al del div y las cuentas no cuadraban. written by Rubén S., 04 de julio de 2007
Disculpa por postear dos veces, jeje.
Lo que me pasó a mi es que quice darle de alto 22 pixeles entonces remplacé los dos treintas por 22 ( el del alto y el de la formula ), ahí comenzó el problema, cuando devolví los valores a 30 funcionó perfecto.  written by marcelo, 06 de noviembre de 2007
este manual no sirve no explica bien y no detalla nada de nada
  Write comment
|
TrackBack URI for this entry
Subscribe to this comment's feed
| < Prev | Next > |
|---|