我如何获得一个固定位置的div来水平滚动内容？使用jQuery

我有一个div.scroll\u用以下CSS修复

.scroll_fixed {
    position:absolute
    top:210px

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

我使用以下jQuery代码在div到达页面顶部时设置.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与内容水平滚动

谁能给我指一下正确的方向吗。JS/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
    });

});

使用
leftInit
会考虑可能的左边距。在这里尝试一下：
您现在可能已经开始前进了，但这里有一个答案，供其他寻找水平滚动固定元素解决方案的人参考。这个jquery插件就是为了解决这个问题而创建的

这个演示使用了一个购物车摘要，当固定到页面顶部时，它仍然会水平滚动；我还将其用于表格数据上方的标题：

演示：（更新）

插件和来源：

用法：

$(document).ready(function() {
    $('#cart').scrollToFixed( { marginTop: 10 } );
});

使用css属性
position:sticky
获取它

这里是文章的解释和现场演示


唯一的缺点是浏览器兼容性。
谢谢，这基本上就是我想要的功能。不幸的是，我的div嵌套在一个以宽度为中心的固定容器中。一旦.fixed类进入布局，布局就会变得一团糟。调整窗口大小时，固定div不再跟随居中布局的移动。我不确定我绕不过去。请看我的回答。第一次加载并尝试调整大小时，红色框会正确移动。一旦您滚动并尝试调整大小，布局就会乱七八糟。还有什么方法可以处理相对于中心容器的定位问题吗？@jfeust：有趣，我会尝试一下，看看我能想出什么。令人惊讶的是，感谢上面的jsfiddle在Chrome 29.0.1547.66上完美地工作，所以Chrome中的小故障已经修复了，我想从今天开始，即使在最新的Google Chrome上，粘性演示也无法工作，所以这似乎不再是一个有用的答案。很好的链接，但我正在投票-1
位置：粘性是一个干净的解决方案。Chrome中也有很好的polyfills。2018:
位置：sticky
工作良好，并且支持良好，除非您想将其用于
或