스크롤하는 동안 고정 Div의 가로 위치를 수정하는 방법은 무엇입니까?

고정 위치 Div의 가로 스크롤

이 쿼리에서 사용자는 고정 div를 가로 스크롤할 때 콘텐츠 충돌을 방지하기 위한 솔루션을 찾고 있습니다. 다른 콘텐츠와 함께. jQuery를 사용한 초기 구현은 성공적으로 div를 수직으로 수정했지만 수평 스크롤에 대한 지원은 부족합니다.

제안된 솔루션에는 jQuery 코드를 수정하여 요소의 왼쪽 속성을 조작하는 작업이 포함됩니다.

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();

    // whether that's below the form
    if (y >= top) {
        // if so, ad the fixed class
        $('.scroll_fixed').addClass('fixed');
    } else {
        // otherwise remove it
        $('.scroll_fixed').removeClass('fixed');
    }

    $(".scroll_fixed").offset({
        left: x + leftInit
    });

});

설명

1. leftInit는 div의 초기 왼쪽 오프셋을 저장합니다.
2. 스크롤 시 x 값은 현재 스크롤 오프셋의 음수로 설정됩니다. 가로 스크롤과 함께 div를 효과적으로 이동합니다.
3. leftInit는 div의 왼쪽 여백이 적절하게 고려되도록 보장합니다.

이 접근 방식은 div의 고정 위치를 유지하면서 허용합니다. 콘텐츠와 함께 가로로 스크롤하여 충돌을 방지하고 사용자 경험을 향상시킵니다.

위 내용은 스크롤하는 동안 고정 Div의 가로 위치를 수정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!