0

私が実際に使ったことのない UI を誰かが提案してくれることを期待しています。

固定高さのスクロール div に表示する必要があるデータがたくさんあります。クライアントは、サブデータを展開して閉じることができるアコーディオン div に表示することを望んでいます。

問題は、サブデータも潜在的に長くなり、ユーザーが各列の内容を理解できるように固定ヘッダーが必要になることです。フィドルを参照してください: http://jsfiddle.net/J5qFA/34/

少し想像力を働かせる必要がありますが、グレーのバーは展開可能な div のヘッダーであり、「Expanded」とラベル付けされたものはクリックされたヘッダーであり、その内容が表示されていると考えてください。(1 つのヘッダー トグルを展開すると、開いている div が閉じられることに注意してください。)

黒いバーはデータ ヘッダーで、黄色のコンテンツはデータです。

黒いバーをスクロール ウィンドウの上部に「固定」して、ユーザーが黄色のコンテンツを下に移動したときに常に表示されるようにする方法はありますか? 灰色のヘッダーの上に表示されるべきではないことに注意してください。したがって、ユーザーが下にスクロールして黄色のデータをさらに表示する場合にのみ、スクロール ウィンドウの上部に固定する必要があります。

そうでない場合、黒のヘッダーが常に黄色のデータの上に表示されるようにするより良い方法はありますか?

ああ、もちろん、スクロールバーを入れ子にしたくありません!

これが理にかなっていることを願っています！

4

2 に答える 2

0

黄色のデータ div に高さを固定し、overflow-y:auto を指定します。

http://jsfiddle.net/J5qFA/35/

外側のオーバーフロー:スクロールも削除します

于 2012-08-23T14:57:38.280 に答える
0

まあ、もっと良い方法があるかどうかはわかりませんが、 と を使用して画面の位置に応じて黒いバー クラスをアタッチするよりも、 jQuery scrollを使用する方法 (と思います) の 1 つです。window.pageYOffsetwindow.scrollTo(0, y)

3つのケースがあると思います：

  • 黒いバーは画面上部の下にあります - いつものように表示してください。
  • 黒いバーは画面の上部にあり、その div は画面です - 使用position: fixed;
  • 黒いバーと div が上にあります - 1 と同じです。

申し訳ありませんが、今はコードを書く時間がありませんが、この方法で行うことを選択した場合は、喜んでお手伝いします.

とにかく頑張ってください！

于 2012-09-11T13:28:52.773 に答える