如何在滚动过程中修复固定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
    });

});

说明

1. leftInit 存储 div 的初始左偏移量。
2. 滚动时，x 值设置为当前滚动偏移量的负数，即有效地随着水平滚动移动 div。
3. leftInit 确保正确考虑 div 上的任何左边距。

这种方法保持了 div 的固定位置，同时允许它沿着内容水平滚动，防止冲突并改善用户体验。

以上是如何在滚动过程中修复固定div的水平位置？的详细内容。更多信息请关注PHP中文网其他相关文章！