如何使用 jQuery 使固定 Div 與內容水平滾動？

使用jQuery 修復帶有內容的水平滾動Div

問題：

問題：詳細說明：

初始設定CSS類別為「scroll_fixed」的div元素到絕對位置。但是，當 div 到達頁面頂部時，jQuery 程式碼會新增「fixed」類別來固定其位置。此設定適用於垂直滾動，但水平滾動會導致內容向右滾動。

目標：

使 div 隨內容水平滾動，類似於提供範例中的第二個框。

答案：

為了實現div 的水平滾動，解決方案保持元素的位置固定，但操縱其left 屬性：

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

    // Check if the element should be fixed based on vertical scroll
    if (y >= top) {
        // if so, ad the fixed class
        $('.scroll_fixed').addClass('fixed');
    } else {
        // otherwise remove it
        $('.scroll_fixed').removeClass('fixed');
    }

    // Adjust the element's left position based on horizontal scroll
    $(".scroll_fixed").offset({
        left: x + leftInit
    });

});</code>

這可確保div 隨頁面內容水平捲動，同時保持其垂直位置固定。

以上是如何使用 jQuery 使固定 Div 與內容水平滾動？的詳細內容。更多資訊請關注PHP中文網其他相關文章！