0

我希望有人能推荐一个我实际上从未见过的用户界面。

我有很多数据需要显示在固定高度的滚动 div 中，为了使其更可口，客户希望子数据显示在可以展开和关闭的手风琴 div 中。

问题是子数据也可能很长，并且需要一个固定的标题，以便用户了解每列中的内容。请看小提琴：http: //jsfiddle.net/J5qFA/34/

您将不得不稍微发挥您的想象力，但将灰色条视为可扩展 div 上的标题，标记为“已扩展”的标题是已单击的标题，显示其内容。（请注意，展开一个标题会关闭任何打开的 div。）

黑条是数据标题，黄色内容是数据。

有没有办法让黑条“粘”在滚动窗口的顶部，这样当用户向下导航黄色内容时它总是可见的？请注意，它不应出现在任何灰色标题的顶部，因此如果用户向下滚动以查看更多黄色数据，则只需要粘在滚动窗口的顶部即可。

如果没有，是否有更好的方法来确保黑色标题始终在黄色数据上方可见？

哦，显然我不想嵌套滚动条！

希望这是有道理的！

4

2 回答 2

0

给黄色数据div一个固定的高度和overflow-y:auto。

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

我还删除了溢出：在外部滚动

于 2012-08-23T14:57:38.280 回答
0

好吧，不知道是否有更好的方法，但一种方法（我会想到）是使用jQuery scroll，而不是根据屏幕的位置使用 window.pageYOffsetand附加黑条类window.scrollTo(0, y)。

我猜你可能有3种情况：

  • 黑条位于屏幕顶部下方 - 照常显示。
  • 黑条在屏幕顶部上方，它的 div 是屏幕 - 使用position: fixed;
  • 黑条在上面以及它的 div - 与 1 相同。

抱歉，但我现在没有时间编写代码，但如果您选择这样做，我将很乐意提供帮助。

无论如何祝你好运！

于 2012-09-11T13:28:52.773 回答