CSS에서 수직 스크롤을 허용하면서 요소의 X축 위치를 어떻게 수정할 수 있습니까?

CSS에서만 X축 위치 고정: 종합 가이드

요소의 X축 위치를 고정하는 기능 수직 스크롤을 허용하는 것은 웹 디자인의 일반적인 요구 사항입니다. 이 기사에서는 CSS와 JavaScript를 사용하여 이 효과를 얻는 기술을 살펴보겠습니다.

CSS 구현

CSS만 사용하여 X축 위치를 고정하려면 다음을 사용하세요. 왼쪽 위치와 고정된 위쪽 위치를 지정하는 동안 절대 위치 지정 속성:

#header {
    top: 15px;
    left: 15px;
    position: absolute;
}

이렇게 하면 요소가 위쪽에서 15픽셀 떨어진 위치에 배치되고 왼쪽에서 15픽셀, 사용자가 수직으로 스크롤할 때 해당 위치에 유지됩니다.

JQuery를 사용한 JavaScript 구현

효과를 더욱 향상시키기 위해 JavaScript를 다음과 같이 사용할 수 있습니다. 스크롤 페이지와 왼쪽 위치를 정렬하는 데 사용됩니다.

$(window).scroll(function(){
    $('#header').css({
        'left': $(this).scrollLeft() + 15
    });
});

이 코드에서 scrollLeft() 함수는 창의 가로 스크롤 위치. 이 값에 15를 추가하면 사용자가 가로로 스크롤할 때에도 요소가 왼쪽에서 15픽셀로 유지됩니다.

동적 스크립트 조정

원본 스크립트에는 왼쪽 위치가 필요합니다. CSS에서는 15px로 설정됩니다. 보다 유연하게 만들려면 다음을 사용할 수 있습니다.

var leftOffset = parseInt($("#header").css('left')); //Grab the left position left first
$(window).scroll(function(){
    $('#header').css({
        'left': $(this).scrollLeft() + leftOffset
    });
});

이 스크립트는 CSS 왼쪽 위치에 따라 자동으로 조정됩니다.

결론

CSS와 JavaScript를 사용하면 X축의 위치만 고정할 수 있어 요소가 수평으로 고정된 상태에서 수직으로 스크롤할 수 있습니다. 이 기술은 요소 배치에 대한 유연성과 제어 기능을 제공하여 사용자 경험과 디자인 다양성을 향상시킵니다.

위 내용은 CSS에서 수직 스크롤을 허용하면서 요소의 X축 위치를 어떻게 수정할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!