позиционирование элемента, установленного на оси x только

в CSS, свойство позиции позволяет вам управлять позиционированием элемента на странице. По умолчанию элементы позиционируются как «статические», то есть они размещаются в соответствии с потоком страницы. Тем не менее, вы можете использовать другие значения для элементов позиции более точно. Это заблокирует позицию элемента относительно видового порта, поэтому он не будет двигаться по горизонтали, даже когда страница прокручивает. позиция: исправлена; Верх: 0; Внизу: 0; }

, однако, с использованием фиксированного позиционирования на одной оси может привести к тому, что элемент перекрывает другое содержание на странице, когда он прокручивает вертикально. Чтобы предотвратить это, вы можете использовать JavaScript для динамической настройки позиции элемента по оси Y, когда страница прокручивается.

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

используя jquery, вы можете прикрепить слушатель Scroll к окну и обновлять верхнюю позицию элемента. { $ ('#element'). css ('top', $ (this) .scrolltop ()); }); это гарантирует, что элемент остается фиксированным на оси x во время прокрутки вертикально.

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

другой метод для достижения этого поведения исключительно с помощью CSS-Transform: translate (). Эта функция преобразования может быть применена к элементу, чтобы перемещать его вертикально, не влияя на ее положение на оси x.

#Element { позиция: исправлена; Слева: 15px; Преобразование: перевести (0, -$ (окно) .scrolltop ()); } ] Этот подход также предотвратит перекрывание элемента другого контента, когда он прокручивает. parseint ($ ("#element"). CSS ('Left')) и используйте его в скрипте в качестве смещения.