如何在滾動過程中修復固定div的水平位置？

固定位置Div 的水平滾動

在此查詢中，用戶尋求一種解決方案，以防止固定div 水平滾動時出現內容衝突與其他內容一起。使用 jQuery 的初始實作成功地垂直修復了 div，但缺乏對水平滾動的支援。

建議的解決方案包括修改jQuery 程式碼來操作元素的left 屬性：

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

});

說明

left初始左偏移量。
1. 滾動時，x 值設定為當前滾動偏移量的負數，即有效地隨著水平滾動移動 div。
2. leftInit 確保正確考慮 div 上的任何左邊距。

這種方法保持了 div 的固定位置，同時允許它沿著內容水平滾動，防止衝突並改善用戶體驗。

以上是如何在滾動過程中修復固定div的水平位置？的詳細內容。更多資訊請關注PHP中文網其他相關文章！