Fijar la posición en el eje X solo en CSS

Al diseñar diseños web, a menudo es deseable tener elementos fijos en un eje específico mientras aún permitiendo el desplazamiento en otras direcciones. Un escenario común es fijar un elemento en el eje x para que permanezca en su lugar horizontalmente mientras el usuario se desplaza verticalmente.

¿Es posible?

Sí, es posible fijar una posición en el eje x solo usando CSS.

Cómo lograrlo

Para lograr esto, sigue estos pasos:

1. Establece la posición del elemento en 'absoluta': Esto elimina el elemento del flujo normal del documento y te permite posicionarlo con precisión.
2. Usar la propiedad 'izquierda': Especifica el borde izquierdo del elemento en relación con el ancestro posicionado más cercano.
3. Usar jQuery: Aproveche jQuery para responder a los eventos de desplazamiento y ajuste la posición del elemento en consecuencia.

jQuery y CSS Ejemplo:

$(window).scroll(function() {
    $('#header').css({
        'left': $(this).scrollLeft()   15 // Adjust based on CSS 'left'
    });
});

#header {
    top: 15px;
    left: 15px;
    position: absolute;
}

Script avanzado:

Para admitir cambios dinámicos de CSS, puede utilizar este script actualizado:

var leftOffset = parseInt($('#header').css('left')); // Grab initial left position
$(window).scroll(function() {
    $('#header').css({
        'left': $(this).scrollLeft()   leftOffset // Use initial offset
    });
});

Al seguir estos pasos, puedes fijar efectivamente la posición de un elemento en el eje x y al mismo tiempo permitir el desplazamiento vertical.