Buen día a todos.
Bueno, la idea que quiero desarrollar es una tabla con una cabecera fija, PERO la idea no es ponerle fixed a la propiedad position de css3, ya que esto implica que no se puede mover ni vertical ni horizontalmente, y dado que la tabla que necesito manejar tiene bastantes columnas, necesito que la cabecera se mantenga fija al hacer scroll vertical, pero se pueda desplazar horizontalmente.
Gracias a dos funciones como éstas logré algo parecido a lo que necesito:
Código Javascript
:
Ver original$(function(){
//detectar scroll hacia abajo
var obj = $('#contenedor'); //objeto sobre el que quiero detectar scroll
var obj_top = 0; //scroll vertical inicial del objeto
obj.scroll(function(){
var obj_act_top = obj.scrollTop(); //obtener scroll top instantaneo
if(obj_act_top > obj_top){
//scroll hacia abajo
$("#cabecera2").css({'position':'fixed' });//cambiar a la propiedad fixed cuando se haga scroll vertical
$("#contenido2").css({'margin-top':'20px' });
console.log('movimiento vertical: '+obj_act_top);
}
if(obj_act_top < obj_top){
//scroll hacia arriba
$("#cabecera2").css({'position':'absolute' });
$("#contenido2").css({'margin-top':'20px' });
console.log('movimiento vertical: '+obj_act_top);
}
obj_top = obj_act_top;
});
});
$(function(){ //me desplaza horizontalmente el contenedor de la cabecera que tiene propiedad fixed.
var lastPos = 0;
var objeto = $('#table_derecha');
objeto.scroll(function(){
var obj_left = objeto.scrollLeft();
if (obj_left > lastPos) {
$("#cabecera2").css({'margin-left':-obj_left+'px' });
}
if (obj_left < lastPos){
$("#cabecera2").css({'margin-left':-obj_left+'px' });
}
lastPos = obj_left;//almacenar scroll top anterior
});
});
Esto me funciona bien y el scroll lo puedo mover horizontalmente y se queda fijo al hacer scroll vertical, pero la falla es que al tener la propiedad fixed, como la cabecera es de gran tamaño horizontalmente, ésta se ubica sobre el div que contiene la tabla y se sobresale bastante, lo cual se ve terrible, existe alguna propiedad que pueda usar para que la cabecera no se vea fuera del div o una forma de poner estatico un contenedor de forma vertical sin aplicar la propiedad position:fixed; ?.
Alguien podría ayudarme?
Y gracias de ante mano.