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

使用jQuery 的固定位置Div 的水平滾動

在本文中，我們將解決固定位置內水平內容滾動的問題使用jQuery定位div。

使用者有一個類別為 scroll_fixed 的 div，並希望在它到達頁面頂部時修復它。以下CSS樣式div：

.scroll_fixed {
    position:absolute
    top:210px
}
.scroll_fixed.fixed {
    position:fixed;
    top:0;
}

jQuery程式碼用於在div到達頂部時添加固定類別：

$(window).scroll(function (event) {
    // Check if the scroll position is greater than the top offset of the div
    if ($(this).scrollTop() >= top) {
        $('.scroll_fixed').addClass('fixed');
    } else {
        $('.scroll_fixed').removeClass('fixed');
    }
});

這對於垂直滾動效果很好，但會導致當瀏覽器視窗較小時，與div 右側的內容發生衝突。用戶希望div隨內容水平滾動。

/解決方案：

要使div水平滾動，我們需要保持其position:fixed並進行操作左側屬性而不是頂部屬性。以下更新的 jQuery 程式碼可實現此目的：

var leftInit = $(".scroll_fixed").offset().left;

$(window).scroll(function (event) {
    // Get the current scroll positions
    var x = 0 - $(this).scrollLeft();
    var y = $(this).scrollTop();

    // Fix the div when it reaches the top
    if (y >= top) {
        $('.scroll_fixed').addClass('fixed');
    } else {
        $('.scroll_fixed').removeClass('fixed');
    }

    // Adjust the left offset of the div based on the scroll position
    $(".scroll_fixed").offset({
        left: x + leftInit
    });
});

透過使用 leftInit，我們可以考慮 div 上的任何左邊距。嘗試此解決方案：http://jsfiddle.net/F7Bme/

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