jQuery를 사용하여 페이지 콘텐츠로 고정 Div 스크롤을 가로로 만드는 방법은 무엇입니까?

jQuery를 사용하여 고정 Div를 수평으로 스크롤

이 문제에는 jQuery와 CSS를 사용하여 수직 위치가 고정된 div 요소가 있습니다. 그러나 가로 스크롤은 div 오른쪽에 있는 콘텐츠와 충돌을 일으킵니다. 페이지 콘텐츠와 함께 div에 대한 가로 스크롤을 활성화하는 것이 목표입니다.

해결 방법은 요소의 고정 위치를 유지하면서 jQuery를 사용하여 왼쪽 속성을 추가로 조작하는 것입니다.

<code class="javascript">var leftInit = $(".scroll_fixed").offset().left;
var top = $('.scroll_fixed').offset().top - parseFloat($('.scroll_fixed').css('margin-top').replace(/auto/, 0));

$(window).scroll(function(event) {
    var x = 0 - $(this).scrollLeft();
    var y = $(this).scrollTop();

    // Vertical positioning logic
    if (y >= top) {
        $('.scroll_fixed').addClass('fixed');
    } else {
        $('.scroll_fixed').removeClass('fixed');
    }

    // Horizontal positioning
    $(".scroll_fixed").offset({
        left: x + leftInit
    });
});</code>

leftInit를 사용하여 고정 요소의 가능한 왼쪽 여백을 설명합니다. 이 접근 방식을 사용하면 제공된 리소스의 두 번째 예와 유사하게 고정 div가 콘텐츠를 따라 가로로 스크롤할 수 있습니다.

위 내용은 jQuery를 사용하여 페이지 콘텐츠로 고정 Div 스크롤을 가로로 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!