2011-08-19 77 views
2

环境: Rails的3.1rc5与jQuery的,Ubuntu 11.04,谷歌浏览器(13),Mozilla Firefox浏览器(6.0)jQuery的浮动头是Laggy

我的工作,有一个相当有限,在办公室的一个项目推出 - 所以我可以放心地说,我们将永远在最新版本的Firefox中运行;我们可以做任何疯狂的js,css3或html5我们想要的。

该项目旨在模仿一个应用程序,一个侧栏(用于操作)和一个窗格中间有一个命令列表(横向和纵向)滚动,而主体不滚动。

中间的面板具有我们需要的页面向下浮动当用户滚动订单上面的标题。我们不能使用position:fixed,因为我们需要水平滚动以及垂直滚动(与屏幕不动产相比,字段更多)。我有它的工作,但它在Chrome中是滞后的,在Firefox中非常滞后 - 在用户停止滚动之前,头似乎并没有实际移动。

由于这是一种复杂的布局,我试图在jsfiddle中重新创建它,但是我无法让它实际上使中间窗格上的滚动工作。这将至少给的什么,我试图做一个更好的主意:

http://jsfiddle.net/d3vkit/8E786/

这里是我使用的CoffeeScript:

jQuery -> 
    order_headings_list = $("#order_headings_list") 
    orders_list = $("#orders_list") 

    orders_list.scroll -> 
    topOffset = orders_list.scrollTop() + "px" 
    order_headings_list.css('top', topOffset) 

这里是产生的JavaScript:

orders_list.scroll(function() { 
    var leftOffset, topOffset; 
    topOffset = orders_list.scrollTop() + "px"; 
    order_headings_list.css('top', topOffset); 
}); 

我唯一的想法是,这是因为我正在将大量列表项移动到很多列表项上,可能它太多了。

我是不是正确地做这个浮动头?任何指针来收紧东西? (为什么不是我捣鼓出溢出滚动?)

UPDATE

我曾多一点的的jsfiddle(http://jsfiddle.net/d3vkit/8E786/),并得到了头部移动,表明发生滞后。在我看来,你滚动,并更新CSS,但不够快,所以它似乎跳动。我怎样才能解决这个问题?

+0

为什么你在一个jQuery函数包装的东西?此外,我真的不知道你想什么来完成 – austinbv

+0

我的印象是,我必须这样做有它的文档负荷运行下 - 我非常新的CoffeeScript,而实际使用的原型不是jQuery的多,所以也许这不需要? 我想做一个垂直浮动标题,保持放在水平滚动,并与滚动div移动,但它不流畅。 – d3vkit

回答

0

为什么不使用位置固定

http://jsfiddle.net/pnAvm/

+0

因为我需要能够水平滚动以及垂直滚动,但是在水平滚动中,固定位置元素随滚动一起移动。我正在考虑试着用js来读取监视器的大小,并改变字段的大小以适应宽度,所以没有水平滚动,但是如果我们添加更多的字段,这可能会使事情复杂化。得到强大局促)。 – d3vkit