Comment puis-je corriger un élément sur l'axe X uniquement en CSS et JavaScript ?

Positionnement d'un élément fixé sur l'axe X uniquement

En CSS, la propriété position permet de contrôler le positionnement d'un élément sur la page. Par défaut, les éléments sont positionnés comme « statiques », ce qui signifie qu'ils sont placés en fonction du flux de la page. Cependant, vous pouvez utiliser d'autres valeurs pour positionner les éléments plus précisément.

Pour fixer un élément sur l'axe des x uniquement, vous pouvez utiliser la position fixe. Cela verrouillera la position de l'élément par rapport à la fenêtre d'affichage, de sorte qu'il ne se déplacera pas horizontalement même lorsque la page défile.

#element {
  position: fixed;
  top: 0;
  bottom: 0;
}

Cependant, l'utilisation d'un positionnement fixe sur un seul axe peut entraîner le chevauchement de l'élément avec d'autres contenus sur la page lorsqu'elle défile verticalement. Pour éviter cela, vous pouvez utiliser JavaScript pour ajuster dynamiquement la position de l'élément sur l'axe Y lorsque la page défile.

Solution JavaScript

En utilisant jQuery, vous pouvez attachez un écouteur d'événement de défilement à la fenêtre et mettez à jour la position supérieure de l'élément en conséquence.

$(window).scroll(function() {
  $('#element').css('top', $(this).scrollTop());
});

Cela garantira que l'élément reste fixé sur l'axe des x tout en faisant défiler verticalement.

Solution CSS

Une autre méthode pour obtenir ce comportement uniquement avec CSS consiste à utiliser transform: translate(). Cette fonction de transformation peut être appliquée à un élément pour le déplacer verticalement sans affecter sa position sur l'axe des x.

#element {
  position: fixed;
  left: 15px;
  transform: translate(0, -$(window).scrollTop());
}

Cette approche empêchera également l'élément de chevaucher d'autres contenus lors de son défilement.

Solution mise à jour

Comme suggéré par @PierredeLESPINAY, pour que le script prenne en charge les modifications dans le CSS sans avoir à le faire recodez-les, vous pouvez récupérer la position initiale gauche de l'élément en utilisant parseInt($("#element").css('left')) et l'utiliser dans le script comme décalage.

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!