CSS에서만 X축 위치 고정

웹 레이아웃을 디자인할 때 요소를 특정 축에 고정하는 것이 바람직한 경우가 많습니다. 여전히 다른 방향으로 스크롤할 수 있습니다. 일반적인 시나리오 중 하나는 사용자가 수직으로 스크롤하는 동안 수평으로 유지되도록 x축의 요소를 수정하는 것입니다.

가능한가요?

예, CSS를 통해서만 x축 위치를 고정할 수 있습니다.

달성 방법

이를 달성하려면 다음 단계를 따르세요.

1. 요소의 위치를 ​​'절대'로 설정: 이렇게 하면 일반 흐름에서 요소가 제거됩니다. 문서의 위치를 ​​정확하게 지정할 수 있습니다.
2. '왼쪽' 속성 사용: 문서를 기준으로 요소의 왼쪽 가장자리를 지정합니다. 가장 가까운 위치의 조상.
3. jQuery 사용: jQuery를 활용하여 스크롤 이벤트에 응답하고 이에 따라 요소의 위치를 ​​조정합니다.

jQuery 및 CSS 예:

$(window).scroll(function() {
    $('#header').css({
        'left': $(this).scrollLeft()   15 // Adjust based on CSS 'left'
    });
});

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

고급 스크립트:

동적 CSS 변경을 지원하려면 다음 업데이트된 스크립트를 사용할 수 있습니다.

var leftOffset = parseInt($('#header').css('left')); // Grab initial left position
$(window).scroll(function() {
    $('#header').css({
        'left': $(this).scrollLeft()   leftOffset // Use initial offset
    });
});

이 단계를 따르면 수직 스크롤을 허용하면서 x축에서 요소의 위치를 ​​효과적으로 고정할 수 있습니다.