環境: Rails 3.1rc5、jQuery、ubuntu 11.04、Google Chrome (13)、Mozilla Firefox (6.0)
私はかなり限定されたオフィス内での展開を行うプロジェクトに取り組んでいます。そのため、これは常に最新バージョンの Firefox で実行されていると言えます。狂った js、css3、または html5 を必要に応じて実行できます。
このプロジェクトは、サイド バー (アクション用) と中央に (水平方向と垂直方向の両方に) スクロールする注文のリストを含むペインを備えたアプリケーションを模倣することを目的としていますが、本体はスクロールしません。
中央のペインには、注文の上にヘッダーがあり、ユーザーがスクロールするときにページを下にフロートさせる必要があります。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が更新されますが、十分に速くはないので、びくびくしているようです。どうすればこれを修正できますか?