2

环境:Rails 3.1rc5 with jQuery, ubuntu 11.04, Google Chrome (13), Mozilla Firefox (6.0)

我正在开发一个在办公室内推出的项目非常有限——所以我可以肯定地说,我们将始终在最新版本的 Firefox 中运行它;我们可以做任何我们想要的疯狂的 js、css3 或 html5。

该项目旨在模仿一个应用程序,带有一个侧边栏(用于操作)和中间的一个窗格,其中包含一个(水平和垂直)scolls(水平和垂直)的订单列表,而主体不滚动。

中间窗格在用户滚动时需要在页面上向下浮动的订单上方有一个标题。我们不能使用 position:fixed 因为我们需要水平和垂直滚动(字段比屏幕空间多)。我已经让它工作了,但它在 Chrome 中很滞后,在 Firefox 中非常滞后 - 在用户停止滚动之前,标题似乎实际上并没有移动。

由于这是一种复杂的布局,我尝试在 jsfiddle 中重新创建它,但是我无法让它真正使中间窗格上的滚动起作用。它至少可以更好地了解我正在尝试做的事情:

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

这是我正在使用的咖啡脚本:

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

我唯一的想法是,这是因为我将一堆列表项移动到很多列表项上,也许它太多了。

我正确地做这个浮动标题吗?有什么可以收紧事情的指示吗?(为什么我的小提琴没有显示溢出滚动?)

更新

我在 jsfiddle ( http://jsfiddle.net/d3vkit/8E786/ )上做了更多工作,并让标题移动,显示了发生的滞后。在我看来,你滚动,它更新了 CSS,但不够快,所以看起来很跳跃。我怎样才能解决这个问题?

4

1 回答 1

0

为什么不只使用固定位置

http://jsfiddle.net/pnAvm/

于 2011-08-19T20:58:58.803 回答