Imagen que se mueve al hacer scroll

Capi666 · #1 (**permalink**) 15/09/2008, 03:45

Hola a todos,

No se si este es el apartado correcto...

Os cuento, tengo una web con un listado muy grande de productos y a la derecha al foto del producto...

El problema es, si selecciono el ultimo producto, la imagen que se ve esta arriba del todo, ¿como podria hacer un div o algo que a medida que hago scroll hacia abajo se mueve la capa?

Gracias y un saludo,

buzu · #2 (**permalink**) 15/09/2008, 12:10

puedes ponerle position: fixed en tu hoja de estilos...

Capi666 · #3 (**permalink**) 17/09/2008, 13:27

Exacto, eso busco... Pero para el IE6?? Eso no funciona...

gracias y un saludo,

David · #4 (**permalink**) 17/09/2008, 13:40

Buscando en el foro de CSS encontré esto.

Panino5001 · #5 (**permalink**) 17/09/2008, 13:50

Probá así:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>fixed</title>
<style>
#logo{ position:fixed; top:30px;}
</style>
<!--[if lt IE 7]> 
<style>
#logo{ 
position:absolute;
top:0;
top: expression((ignorar = 30+document.documentElement.scrollTop+document.body.scrollTop) + 'px' );
}</style>
<![endif]-->
</head>

<body>
<img id="logo" src="http://static.forosdelweb.com/fdwtheme/logo-reflejo.png" /><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

</body>
</html>

Edito: Perdón David por el choque ;)

David · #6 (**permalink**) 17/09/2008, 13:55

Cita:

Iniciado por Panino5001

Perdón David por el choque ;)

Es un honor chochar contigo

.

Me pareció interesante esa condicional, y también la condicional de la página que mencioné

.

buzu · #7 (**permalink**) 17/09/2008, 22:14

ya, yo sabia del bug y de la solucion de stu nichols. Ese tipo es un genio con el CSS. No lo menciones pues lo crei inecesario...

Capi666 · #8 (**permalink**) 17/09/2008, 23:46

Hola David el Grande,

He visto la pagina esa, eso es lo que busco, lo que pasa que el codigo no lo entiendo... Parece que funciona con solo esto:

Código PHP:

  #menu {display:block; top:10px; left:170px; width:130px; position:fixed; border:1px solid #888; padding:10px; text-align:center; font-weight:bold; color:#fff; background:url(grid2.gif);}

Hola Panino5001,

Al poner esto,

Código PHP:

  <!--[if lt IE 7]> 

<style>

#logo{ 

position:absolute;

top:0;

top: expression((ignorar = 30+document.documentElement.scrollTop+document.body.scrollTop) + 'px' );

}</style>

<![endif]-->

Se queda comentado ese trozo de codigo... y no sirve para nada, no?

EDITO: vale, es un Comentarios Condicionales para IE... no lo conocia, voy a probar con ese codigo. Lo que pienso que en lugar de IE 7 sera IE 6 no?

Gracias y un saludo,

Panino5001 · #9 (**permalink**) 17/09/2008, 23:53

No. Esto <!--[if lt IE 7]> hace que las versiones de Explorer inferior a la 7 (que son las que no soportan el posicionamiento fixed), interpreten el css que está dentro del comentario. Se llama comentario condicional. Adicionalmente, se agrega expression, que es una implementación de Explorer para ejecutar javascript dentro de código css y que, en este caso, ayuda a simular el posicionamiento fixed.

Panino5001 · #10 (**permalink**) 17/09/2008, 23:55

Cita:

Iniciado por Capi666

Lo que pienso que en lugar de IE 7 sera IE 6 no?

Gracias y un saludo,

No de nuevo: el lt significa menor que ;)Más info

Capi666 · #11 (**permalink**) 18/09/2008, 04:47

Ok, gracias!!!!

andteam · #12 (**permalink**) 09/10/2008, 08:43

amigos cual seria el codigo exacto para ponerlo en mi web?

David · #13 (**permalink**) 09/10/2008, 08:52

En el mensaje #4 yo puse un enlace que explica cómo hacerlo. Y en el mensaje #5 Panino5001 puso un código que funciona perfectamente.

Capi666 · #14 (**permalink**) 10/10/2008, 08:03

Yo he usado el de panino y me funciona a la perfección.

un saludo,

disaster_piece · #15 (**permalink**) 05/01/2009, 05:20

Hola, ya que estamos en eso, una consulta, como se podra hacer algo como lo de la pagina de ********.com? vieron que el carrito de compras se sale del lugar cuando vas bajando la pagina y te sigue y luego vuelve a su lugar cuando vuelves, como se podra hacer alguien puede ayudarme en eso? intente con el fixed, pero se mueve desde que muevo el scroll y no desde que llega a la altura de dicho div para que recien baje de su lugar, espero me puedan ayudar con eso. Un saludo

grupodelsur · #16 (**permalink**) 30/03/2009, 09:01

El codigo de Pannino funciona perfecamente pero solo con imagenes. Es posible hacer que funcione con archivos flash?