Posición simulada: arreglada en jQuery

Tengo un encabezado que es más grande que el ancho de la página, así que no puedo usar position:fixed para colocarlo en la parte superior de la página, porque necesito poder desplazarme horizontalmente. No creo que haya una solución de CSS para esto.Posición simulada: arreglada en jQuery

Hice una muestra de código para tratar de reproducir el efecto de position:fixed, pero hay saltos no deseados. Mi código es el siguiente:

$(window).scroll(function() { 
      var y = $(window).scrollTop(); 
      $("#headertable").css('top', y+175); 
});

¿Hay alguna forma para que sea realmente unida, como position:fixed? (Curiosamente, es mejor mostrarlo ahora en IE que en FF, porque no tiene este efecto de "salto")

Encontrará un ejemplo aquí: http://jsbin.com/eyuya/7. La primera tabla es con position:fixed, la otra usa mi código. Ese es el efecto de salto que intento evitar si hay una solución.

Editar:

todavía no hemos encontrado una solución satisfactoria, creo que voy a usar esto al final, ya que el sitio está destinado a ser utilizado en el IE y no parece como un milagro Existe una solución para adjuntar un div a la ventana gráfica y poder desplazarse horizontalmente. Estoy empezando una recompensa en caso de que alguien haya tenido este problema antes y haya encontrado una buena solución.

Gracias para las personas que ya trataron de responder a esta no es tan simple como parece problema;)

Fuente

2010-07-07 Michael Lumbroso

No entiendo lo que está tratando de hacer. ¿Puedes explicarme mas? – Unicron

Me gustaría tener una posición: fija pero solo vertical, es decir que necesito desplazarme horizontalmente, lo que no está permitido por la posición: fijo –

Usted puede envolver el elemento con un DIV posicionado estática para obtener barras de desplazamiento y luego escuchar el desplazamiento de la ventana y la posición cabecera fija de acuerdo con el valor scrollLeft:

var elem = $('#headertable'); 
var win = $(window); 
var wrap = $('<div>').css({ 
    width: elem.width(), 
    height: elem.height() 
}); 
elem.wrap(wrap); 
win.scroll(function() { 
    elem.css('left', win.scrollLeft()*-1); 
});

Parece que funciona en IE/FF/Chrome:

http://jsbin.com/efuya3

Fuente

2010-07-19 11:07:29 David

Funciona perfectamente, muchas gracias :) –

Necesitaba esta solución para trabajar con un encabezado cuyo ancho se estableció en 100%, con un ancho mínimo establecido. Con el estado actual, los problemas se producirían cuando la ventana se actualizara por encima del ancho mínimo y luego se redujera el tamaño, ya que el ajuste sería demasiado grande, lo que provocaría un espacio blanco a la derecha de la página cuando se desplazara. Para arreglar esto, edité su jsbin con mi ejemplo: http://jsbin.com/efuya3/17/ Espero que esto ayude a alguien más que pueda toparse con esta joya. Gracias ! – Ben

se podría crear un div contenedor y luego especificar una anchura del div

ejemplo, el ancho: 150% ; o ancho; 2000px;

función de sus necesidades

¿Por qué necesita para desplazarse?

Fuente

2010-07-07 08:00:53 Hailwood

Este es mi thead que es posición: fijo. Esta es una tabla con 20 columnas, tengo la capacidad de ocultar algunas, pero cuando necesito ver todo, necesito desplazarme horizontalmente y ver todos los títulos de las columnas. Estoy probando tu solución y te respondo. –

Desafortunadamente no funciona, estableciendo un ancho para una posición: el elemento fijo no permite desplazamiento horizontal, intentaré hacer un ejemplo para mostrar exactamente lo que tengo ahora y lo que me molesta con mi solución. Gracias por el contestador de todos modos;) –

Eche un vistazo a http://jsbin.com/eyuya/3, ¿ve el problema? –

Puede crear una visibilidad ficticia: elemento oculto con el mismo ancho que el de la posición: elemento fijo. Este es un ejemplo:

<html> 
<head> 
    <script src="http://www.google.com/jsapi"></script> 
    <script> 
    google.load("jquery", "1.4.2"); 
    google.setOnLoadCallback(function() { 
     $(document).ready(function(){ 
     var dummy = $('<div>dummy</div>').width($('#header').width() + 'px').css('visibility','hidden'); 
     $('body').append(dummy); 
     }); 
    }); 
    </script> 
</head> 
<body> 
<div id="header" style="width:2000px;background:red;position:fixed;top:0;height:20px;"> 
    This is aheder with fixed position 
</div> 

<div style="height:1200px;background:green;"> 

</div> 
</body> 
</html>

Fuente

2010-07-07 08:30:20 jerjer

Bueno, esto parece exactamente lo que necesito, lo estoy probando y lo aceptaré si está bien. Muchas gracias, he buscado en todo Internet una solución decente, pero solo el mejor sitio web para programadores puede proporcionar la mejor y la mejor respuesta;) –

Bueno, es extraño, no parece ser el truco de FF : ver http://jsbin.com/awawa3 ¿Tienes alguna explicación? Gracias –

está trabajando en mi extremo, estoy usando FF 3.6 – jerjer

http://fixedheadertable.com/demo/multipletablesdemo.html

prueba este lugar :)

Fuente

2010-07-08 04:08:48 Hailwood

Oye, gracias por el consejo, pero ya he visto este, y no se ajusta a mis expectativas ya que la barra de desplazamiento está en el cuerpo, y necesito desplazarme con la barra derecha, porque ya no tengo una gran cantidad de espacio para mostrar todas las columnas. Creo que implementaré su solución anterior o Jerjer One, porque es un software de la compañía, por lo que no cambiarán de Internet Explorer en un momento. Desafortunadamente: s –

Posición simulada: arreglada en jQuery

Respuesta

Cuestiones relacionadas