Puis-je corriger la position d'un élément sur l'axe X uniquement en utilisant CSS ?

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 Il

Pour y parvenir, suivez ces étapes :

1. Définissez la position de l'élément sur « absolue » : Cela supprime l'élément du flux normal du document et 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. Utilisez 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;
}

Avancé Script :

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 corriger efficacement la position d'un élément sur l'axe des x tout en permettant le défilement vertical.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!