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

我有一个div.scroll_fixed与下面的CSS

.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 }); }); 

使用leftInit考虑可能的左边距。 试试这里： http : //jsfiddle.net/F7Bme/

Answer 2

现在你可能已经开始了，但是对于其他任何想要水平滚动的固定元素解决scheme的人来说，这是一个答案。 这个jquery插件是为了解决这个确切的问题而创build的。

此演示使用购物车摘要，当固定到页面顶部时，仍然会水平滚动; 而且，我也用它作为表格数据之上的标题：

演示： http : //jsfiddle.net/y3qV5/434/ （更新）

插件和源代码： https ： //github.com/bigspotteddog/ScrollToFixed

用法：

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

Answer 3

使用CSS属性position:sticky来获取它。

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

http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

唯一的缺点是浏览器的兼容性。