Comment puis-je corriger la position de l'axe X d'un élément tout en autorisant le défilement vertical en CSS ?

Fixation de la position sur l'axe X uniquement en CSS : un guide complet

La possibilité de fixer la position d'un élément sur l'axe X tout en permettant le défilement vertical est une exigence courante dans la conception Web. Cet article explorera une technique utilisant CSS et JavaScript pour obtenir cet effet.

Implémentation CSS

Pour fixer la position sur l'axe X uniquement à l'aide de CSS, utilisez le propriété de positionnement absolu tout en spécifiant la position gauche et une position haute fixe :

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

Cela positionnera l'élément à 15 pixels du haut et à 15 pixels du à gauche, et il restera dans cette position lorsque l'utilisateur fait défiler verticalement.

Implémentation de JavaScript à l'aide de JQuery

Pour améliorer encore l'effet, JavaScript peut être utilisé pour conserver le position gauche alignée avec la page de défilement :

$(window).scroll(function(){
    $('#header').css({
        'left': $(this).scrollLeft() + 15
    });
});

Dans ce code, la fonction scrollLeft() renvoie la position de défilement horizontal de la fenêtre. L'ajout de 15 à cette valeur garantit que l'élément reste à 15 pixels de la gauche même lorsque l'utilisateur fait défiler horizontalement.

Ajustement dynamique du script

Le script d'origine nécessite la position à gauche en CSS pour être défini sur 15px. Pour le rendre plus flexible, vous pouvez utiliser ce qui suit :

var leftOffset = parseInt($("#header").css('left')); //Grab the left position left first
$(window).scroll(function(){
    $('#header').css({
        'left': $(this).scrollLeft() + leftOffset
    });
});

Ce script s'ajustera automatiquement en fonction de la position gauche du CSS.

Conclusion

En utilisant CSS et JavaScript, il est possible de fixer une position sur l'axe X uniquement, permettant à un élément de défiler verticalement tout en restant fixe horizontalement. Cette technique offre flexibilité et contrôle sur le positionnement des éléments, améliorant ainsi l'expérience utilisateur et la polyvalence de la conception.

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!