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

Fixer l'élément sur l'axe X uniquement : préserver la position horizontale lors du défilement

Dans le développement Web, le positionnement précis des éléments est crucial pour l'expérience utilisateur et esthétique. Un scénario courant consiste à ce qu'un élément reste fixe sur l'axe X mais défile verticalement en fonction de l'expérience de navigation de l'utilisateur.

Question :

Est-il possible de corriger le position d'un élément HTML sur l'axe des x uniquement, lui permettant de défiler verticalement avec le contenu de la page mais en conservant son horizontalité position ?

Réponse :

Oui, y parvenir est possible grâce à une combinaison de CSS et de JavaScript. Voici comment procéder :

CSS :

Définissez la position de l'élément comme absolue et spécifiez son décalage supérieur :

#my-element {
    position: absolute;
    top: 15px;
}

JavaScript :

À l'aide de jQuery, ajoutez un écouteur d'événement au défilement de la fenêtre événement. Dans l'écouteur, ajustez la position gauche de l'élément en fonction de la position de défilement actuelle :

$(window).scroll(function() {
    $('#my-element').css({
        'left': $(this).scrollLeft()
    });
});

Dans le CSS, nous positionnons l'élément de manière absolue avec un décalage supérieur de 15 px pour garantir qu'il reste au-dessus du haut de la page. . Le code JavaScript garantit que lorsque l'utilisateur fait défiler, le décalage gauche de l'élément reste le même, l'empêchant de se déplacer horizontalement.

Remarque :

Pour conserver la position gauche de l'élément même s'il change dans le CSS, vous pouvez utiliser ce code JavaScript mis à jour :

var leftOffset = parseInt($("#my-element").css('left'));
$(window).scroll(function() {
    $('#my-element').css({
        'left': $(this).scrollLeft() + leftOffset
    });
});

Cette approche récupère la position initiale à gauche du CSS et l'utilise dans le script, garantissant que toutes les modifications CSS ultérieures sont reflétées dans le comportement JavaScript.

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!