Fixando a posição no eixo X apenas em CSS

Ao projetar layouts da web, muitas vezes é desejável ter elementos fixados em um eixo específico enquanto ainda permitindo a rolagem em outras direções. Um cenário comum é fixar um elemento no eixo x para que ele permaneça no lugar horizontalmente enquanto o usuário rola verticalmente.

É possível?

Sim, é possível fixar uma posição no eixo x apenas usando CSS.

Como conseguir isso

Para conseguir isso, siga estas etapas:

1. Defina a posição do elemento como 'absoluta': isso remove o elemento do fluxo normal do documento e permite posicioná-lo com precisão.
2. Use a propriedade 'left': Especifique a borda esquerda do elemento em relação ao ancestral posicionado mais próximo.
3. Use jQuery: Aproveite o jQuery para responder a eventos de rolagem e ajustar a posição do elemento de acordo.

jQuery e CSS Exemplo:

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

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

Script avançado:

Para oferecer suporte a alterações dinâmicas de CSS, você pode usar este script atualizado:

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

Seguindo essas etapas, você pode corrigir efetivamente a posição de um elemento no eixo x e ainda permitir a rolagem vertical.