如何让固定位置的 div 随内容水平滚动？使用 jQuery

我有一个带有以下 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。

我基本上希望它像第二个盒子一样工作example.

该演示保留了元素的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
    });

});

Using leftInit考虑可能的左边距。在这里尝试一下：http://jsfiddle.net/F7Bme/