Positionnant un élément fixé sur l'axe x uniquement

En css, la propriété de position vous 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 plus précisément les éléments.

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

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

Cependant, l'utilisation de positionnement fixe sur un seul axe peut entraîner le chevauchement de l'élément sur la page lorsqu'il fait défiler verticalement. Pour éviter cela, vous pouvez utiliser JavaScript pour ajuster dynamiquement la position de l'élément sur l'axe des y lorsque la page est défilée. { $ ('# élément'). css ('top', $ (this) .scrolltop ()); });

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

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

# élément { Position: fixe; Gauche: 15px; Transform: tradlate (0, - $ (fenêtre) .scrollTop ()); }

Cette approche empêchera également l'élément de chevaucher d'autres contenus lorsqu'il fait défiler. parseInt ($ ("# élément"). css ('gauche')) et utilisez-le dans le script comme décalage.