Fixation de la position sur l'axe X uniquement en CSS

Lors de la conception de mises en page Web, il est souvent souhaitable d'avoir des éléments fixés sur un axe spécifique tout en permettant toujours le défilement dans d'autres directions. Un scénario courant consiste à fixer un élément sur l'axe X afin qu'il reste en place horizontalement pendant que l'utilisateur fait défiler verticalement.

Est-ce possible ?

Oui, il est possible de fixer une position sur l'axe des x uniquement en utilisant CSS.

Comment y parvenir

Pour y parvenir, suivez ces étapes :

1. Définir la position de l'élément sur « absolue » : Cela supprime l'élément du flux normal du document et vous permet de le positionner avec précision.
2. Utiliser la propriété 'left' : Spécifiez le bord gauche de l'élément par rapport à l'ancêtre positionné le plus proche.
3. Utiliser jQuery : exploitez jQuery pour répondre aux événements de défilement et ajuster la position de l'élément en conséquence.

Exemple jQuery et CSS :

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

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

Script avancé :

Pour prendre en charge les modifications CSS dynamiques, vous pouvez utiliser ce script mis à jour :

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

En suivant ces étapes, vous pouvez fixer efficacement la position d'un élément sur l'axe des X tout en permettant le défilement vertical.