posicionando un elemento fijado en el eje x solo

en CSS, la propiedad de posición le permite controlar el posicionamiento de un elemento en la página. Por defecto, los elementos se colocan como "estáticos", lo que significa que se colocan de acuerdo con el flujo de la página. Sin embargo, puede usar otros valores para posicionar elementos con más precisión.

para solucionar un elemento en el eje x solamente, puede usar la posición fija. Esto bloqueará la posición del elemento en relación con la ventana gráfica, por lo que no se moverá horizontalmente incluso cuando la página se desplaza.

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

Sin embargo, usar posicionamiento fijo en un solo eje puede hacer que el elemento superponga otro contenido en la página cuando se desplaza verticalmente. Para evitar esto, puede usar JavaScript para ajustar dinámicamente la posición del elemento en el eje y cuando la página está desplazada.

javaScript Solution

usando jQuery, puede adjuntar un scroll de scroll a la ventana y actualizar el elemento superior posición en consecuencia. { $ ('#elemento'). css ('top', $ (this) .scrolltop ()); });

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

Otro método para lograr este comportamiento puramente con CSS es para usar transformación: traducir (). Esta función de transformación se puede aplicar a un elemento para moverlo verticalmente sin afectar su posición en el eje x.

#elemento { Posición: fijo; Izquierda: 15px; transformar: traducir (0, -$ (ventana) .scrolltop ()); }

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

como lo sugiere @PierDeSpinay, para hacer que el script soporte cambie los cambios en el CSS sin tener que recodificarlos, puede tomar la posición inicial de la izquierda del elemento del elemento de @PierRedEl parseInt ($ ("#elemento"). css ('izquierda')) y úselo en el script como un desplazamiento.