如何使用 jQuery 使固定 Div 与内容水平滚动？

使用 jQuery 修复带有内容的水平滚动 Div

问题：

我怎样才能设置固定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中文网其他相关文章！