修复了使用多个 Fullcalendar 滚动的标题答案

【问题标题】：Fixed headers with scrolling using multiple Fullcalendars修复了使用多个 Fullcalendar 滚动的标题
【发布时间】：2014-07-21 20:48:59
【问题描述】：

我正在扩展一个日程安排应用程序，该应用程序在议程日视图中显示多个完整日历，以显示多人当天的日程安排。让每个 Fullcalendar 使用自己的滚动条已被拒绝；因此，所有的日历都会全长显示，并在周围的 div 中设置一个滚动条。

现在的问题是让标题在垂直滚动期间保持固定。扩展标题功能还有其他要求（附加数据、图标、链接等），因此在每个 Fullcalendar div 上方创建自己的标题对我来说更有意义。

使用 CSS 并正确放置 div，我能够让日历与标题分开垂直滚动，从而实现“固定标题”效果。问题是水平滚动：如果我让 div 水平向外延伸，那么包含日历的 div 的垂直滚动条一直向右，超出可见性。

我还尝试使用带有任意文本的标题设置固定标题的插件，然后将 Fullcalendar div 放在单行中的元素内。这些都以不同的方式失败（隐藏日历、重新打印标题、其他方式）。

这是基本设置：http://jsfiddle.net/jzqJC/。我正在寻找如何使主要内容区域具有（1）必要时垂直和水平滚动条，（2）在垂直滚动时保持列标题固定的方向，以及（3）同步列标题的水平滚动和它们下面的日历。我花了几天时间根据 stackoverflow 和谷歌搜索来修补和尝试一些东西，但我很茫然，需要帮助。请指教。

[附带问题：如何在小提琴中链接到 fullcalendar.min.js？我是否需要文件的公共 URL 并将其添加为资源？如果是这样，将该文件放在公共 URL 中的最佳方式是什么？]

谢谢，
J

【问题讨论】：

这不是您问题的解决方案——但是您是否见过一个名为 jQuery-Layout 的插件？ layout.jquery-dev.net - 可能会帮助您实现这一目标。
这很酷，但它似乎只对页眉、页脚和侧边栏有帮助。我找不到解决滚动问题的方法。
您可以像这样在 html 中添加包含它的脚本：
谢谢，我没有意识到他有一个公众。

标签： html css scroll fullcalendar

【解决方案1】：

我创建了这个 Fiddle，看看它是否是你要找的：http://jsfiddle.net/7NgUB/

我将 .headerItem,.calendarItem 显示更改为内联，并将 #headerRow,#calendarRow 位置更改为 CSS 中的绝对位置。

然后一切都用jquery完成了：

指定#headerRow,#calendarRow width 为其子项的总宽度，将#calendarRow 顶部位置设置为显示在#headerRow 下方，每次滚动 #content 时更改 #headerRow 顶部位置

【讨论】：

这在小提琴中效果很好，但我无法让它在我的项目中工作。我试图把事情删掉，直到它起作用。根据 Alvaro 的评论，我更新了小提琴以使用 fullcalendar.js：jsfiddle.net/RJvhk。问题：'lleft' 变量是用来做什么的？我没有看到它在哪里被使用。
它什么都没用，我只是尝试了几件事，忘记擦除它。你的小提琴在我看来不错，有什么问题？
我认为最终是版本问题，当我指向一个干净的 1.5.3 fullcalendar.min.js 文件时，它可以工作！下一个问题：向下滚动时，标题位于 fullcalendar 对象的后面。用 .calendar{background-color:Green;} 查看这个小提琴：jsfiddle.net/S9DKV。将背景颜色设置为透明，向下滚动时可以看到标题。我尝试将标题的 z-index 设置为 9999，但这不起作用。有什么想法吗？
另外，我会赞成您的回答，因为它非常很有帮助，但我缺乏声誉。只想对您的帮助表示感谢。
这很简单，只需将此属性添加到#calendarHeaderRow z-index:100;背景颜色：白色； jsfiddle.net/Ukywv/2 . 很高兴它有帮助，所以你不能给出正确的答案吗？