如何获得固定位置的div，以使其与内容水平滚动？使用jQuery

Question

我有以下CSS的div.scroll_fixed

.scroll_fixed {
    position:absolute
    top:210px

}
.scroll_fixed.fixed {
    position:fixed;
    top:0;
}

当div到达页面顶部时，我正在使用以下jQuery代码设置.fixed类。

var top = $('.scroll_fixed').offset().top - parseFloat($('.scroll_fixed').css('margin-top').replace(/auto/, 0));

$(window).scroll(function (event) {
    // what the y position of the scroll is
    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');
    }
});

这对于垂直滚动固定非常有用。但是在浏览器窗口较小的情况下，水平滚动会导致与此固定div右侧的内容发生冲突。

我希望div随内容水平滚动。

谁能指出我正确的方向。仍然用JS / JQuery弄湿我的脚。

我基本上希望它像本示例中的第二个框一样工作。

Answer 1

该演示将保留元素的 属性position:fixed并对其进行操作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
    });

});