Foros del Web » Creando para Internet » CSS »

Mantener fijo un elemento dentro de una capa con desplazamiento (scroll)

Estas en el tema de Mantener fijo un elemento dentro de una capa con desplazamiento (scroll) en el foro de CSS en Foros del Web. Hola chicos/as: Tengo creado un diseño como el siguiente: Consiste en una capa DIV con desplazamiento (overflow: auto), que contiene 2 tablas. Una que hace ...
  #1 (permalink)  
Antiguo 25/10/2008, 09:13
Avatar de Negora  
Fecha de Ingreso: agosto-2003
Mensajes: 122
Antigüedad: 14 años, 3 meses
Puntos: 5
Mantener fijo un elemento dentro de una capa con desplazamiento (scroll)

Hola chicos/as:

Tengo creado un diseño como el siguiente:



Consiste en una capa DIV con desplazamiento (overflow: auto), que contiene 2 tablas. Una que hace de cabecera y otra que contiene el listado en sí. Mi intención es que pese a que se realice un desplazamiento vertical en la capa, la tabla de la cabecera se siga viendo en esa posición, en la zona superior.

Esto lo he resuelto mediante JavaScript, controlando el evento de tipo "onScroll" en la capa. El problema es que dependiendo del navegador el resultado final diverge bastante. Mientras que Safari cumple a la perfección, el resto parece ejecutar la función con retraso, produciendo un efecto bastante antiestético.

Quisiera saber si empleando exclusivamente CSS se os ocurre algún modo de conseguir algo así, pero sin artificios extraños (por mi parte sigo experimentando con JavaScript para mejorar el asunto).

Si pudiese especificar la propiedad "position: fixed" a la tabla de cabecera sería estupendo, pero por desgracia esto implica un posicionamiento con respecto a todo el cuadro y quedaría fuera de la capa.

Muchas gracias.

Última edición por Negora; 25/10/2008 a las 09:33
  #2 (permalink)  
Antiguo 25/10/2008, 09:30
Avatar de Null_  
Fecha de Ingreso: octubre-2008
Ubicación: Santiago
Mensajes: 530
Antigüedad: 9 años, 1 mes
Puntos: 30
Respuesta: Mantener fijo un elemento dentro de una capa con desplazamiento (scroll)

para que la tabla del encabezado no se desplaze utiliza
position:absolute;left:x;top:x;

Suerte :D
  #3 (permalink)  
Antiguo 25/10/2008, 09:33
Avatar de Negora  
Fecha de Ingreso: agosto-2003
Mensajes: 122
Antigüedad: 14 años, 3 meses
Puntos: 5
Respuesta: Mantener fijo un elemento dentro de una capa con desplazamiento (scroll)

Null_: Muchas gracias por responder pero, ¿A qué te refieres exactamente con los valores "x" de "left" y "top"?
  #4 (permalink)  
Antiguo 25/10/2008, 09:53
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Respuesta: Mantener fijo un elemento dentro de una capa con desplazamiento (scroll)

Hola Negora

Echa un vistazo a este mensaje:

http://www.imaputz.com/cssStuff/bigFourVersion.html

Saludos,
  #5 (permalink)  
Antiguo 25/10/2008, 10:03
Avatar de Negora  
Fecha de Ingreso: agosto-2003
Mensajes: 122
Antigüedad: 14 años, 3 meses
Puntos: 5
Respuesta: Mantener fijo un elemento dentro de una capa con desplazamiento (scroll)

JaiverB: Muchas gracias Javier. El problema es que ése es el formato de tabla que empleaba yo para mis librerías AJAX antes de modificarlas e intentar implementar este otro.

Con ese sistema las columnas forzosamente se han de visualizar al completo y es necesario que el lugar donde la insertes disfrute de anchura suficiente. Es el que yo venía usando hasta ahora, sobretodo por estética, ya que jamás me gustaron las barras de scroll lateral para estos casos.

Sin embargo, con la llegada de nuevos proyectos más "bastos", me vi en la necesidad de sacrificar estética por utilidad, ya que era necesario insertar tablas de muchas columnas en espacios bastante más reducidos. Y de ahí que necesite a la fuerza un desplazamiento horizontal también. Por ello me vi avocado a buscar algo como lo que planteo.

También pensé en envolver ese tipo de tabla que comentas con una capa con scroll horizontal, pero por desgracia eso causaría que la barra de desplazamiento vertical no se visualizase hasta que se moviese la horizontal hasta el final.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:01.