CSS 및 JavaScript에서만 요소를 X축에만 고정하려면 어떻게 해야 합니까?

X축에만 고정된 요소 위치 지정

CSS에서 위치 속성을 사용하면 요소의 위치 지정을 제어할 수 있습니다. 페이지. 기본적으로 요소는 "정적"으로 배치됩니다. 즉, 페이지 흐름에 따라 배치됩니다. 그러나 다른 값을 사용하면 요소의 위치를 ​​더 정확하게 지정할 수 있습니다.

x축에만 요소를 고정하려면 고정 위치를 사용할 수 있습니다. 이렇게 하면 뷰포트를 기준으로 요소의 위치가 잠기므로 페이지가 스크롤될 때에도 수평으로 이동하지 않습니다.

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

그러나 단일 축에서 고정 위치 지정을 사용하면 요소가 다른 콘텐츠와 겹칠 수 있습니다. 페이지가 수직으로 스크롤될 때의 모습입니다. 이를 방지하려면 JavaScript를 사용하여 페이지를 스크롤할 때 y축에서 요소의 위치를 ​​동적으로 조정할 수 있습니다.

JavaScript 솔루션

jQuery를 사용하면 다음과 같은 작업을 수행할 수 있습니다. 스크롤 이벤트 리스너를 창에 연결하고 그에 따라 요소의 상단 위치를 업데이트합니다.

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

이렇게 하면 수직으로 스크롤하는 동안 요소는 x축에 고정된 상태로 유지됩니다.

CSS 솔루션

CSS만으로 이 동작을 달성하는 또 다른 방법은 변환: 번역()을 사용하는 것입니다. 이 변환 기능을 요소에 적용하면 X축의 위치에 영향을 주지 않고 요소를 수직으로 이동할 수 있습니다.

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

이 접근 방식은 요소가 스크롤할 때 다른 콘텐츠와 겹치는 것도 방지합니다.

업데이트된 솔루션

@PierredeLESPINAY가 제안한 대로 스크립트가 다시 코딩할 필요 없이 CSS를 사용하는 경우,parseInt($("#element").css('left'))를 사용하여 요소의 초기 왼쪽 위치를 가져와 스크립트에서 오프셋으로 사용할 수 있습니다.

위 내용은 CSS 및 JavaScript에서만 요소를 X축에만 고정하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!