Fullcalendar 活动内容置顶答案

【问题标题】：Fullcalendar event content stickyFullcalendar 活动内容置顶
【发布时间】：2018-10-04 14:40:31
【问题描述】：

我试图使 Fullcalendar 中的事件内的内容具有粘性。当您在日历中滚动时，只要事件不在视图之外，事件的内容就应该可见。

我用简单的 css 试过了，但是不行，你自己看看：

.fc-event .fc-content {
  position:sticky;
  top:0;
}

https://codepen.io/snak3/pen/KZKNMd

有没有人知道如何让这个工作或者不是那么容易？

【问题讨论】：

添加了新答案。让我知道这是否合适。

标签： fullcalendar sticky

【解决方案1】：

开箱即用不可能使用 position:sticky，但这里有一个示例，说明如何使用 js 进行处理（将其添加到脚本末尾）：

const content = document.querySelectorAll('.fc-event .fc-content')[1];
const scroller = document.querySelector('.fc-scroller');
scroller.addEventListener("scroll", function() {
    if (scroller.scrollTop > 100) {             
        content.style.position = "fixed";
        content.style.top = "130px";
    }
    else {
        content.style.position = "unset";               
    }
});

显然 selector 和 top 值是非常具体的。您可以使用 js 计算每个事件的适当顶部距离，并将其应用于每个滚动过程。不过，这是很多工作。

【讨论】：

嘿。谢谢你的回答。如果很难实现这种行为，我会离开它。如果日历中有很多事件，那么滚动时所有事件都会有很多计算。这会导致应用性能不佳。