x 축의 요소를 고정하려면 고정 위치를 사용할 수 있습니다. 이것은 뷰포트에 비해 요소의 위치를 ​​잠그므로 페이지가 스크롤 할 때에도 수평으로 이동하지 않습니다.

#요소 { 위치 : 고정; 상단 : 0; 하단 : 0; }

그러나 단일 축에서 고정 위치를 사용하면 요소가 수직으로 스크롤 할 때 페이지의 다른 컨텐츠를 겹치게 할 수 있습니다. 이를 방지하기 위해 페이지가 스크롤 될 때 javaScript를 사용하여 y 축에서 요소의 위치를 ​​동적으로 조정할 수 있습니다.

javaScript 솔루션

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

는 창에 스크롤 이벤트를 첨부하고 요소의 상단 위치를 업데이트 할 수 있습니다. { $ ( '#element'). css ( 'top', $ (this) .scrolltop ()); });

이것은 수직으로 스크롤하는 동안 요소가 x 축에 고정되어 있도록 보장합니다. 이 변환 함수는 x 축에서의 위치에 영향을 미치지 않고 수직으로 이동하기 위해 요소에 적용될 수 있습니다.

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

#요소 {. 위치 : 고정; 왼쪽 : 15px; 변환 : 번역 (0, -$ (창) .scrolltop ()); }

이 접근법은 또한 스크롤 할 때 다른 콘텐츠를 겹치지 못하게합니다. parseint ($ ( "#element"). css ( 'left'))와 스크립트에서 오프셋으로 사용합니다.