全日历活动内容粘滞

Question

im试图将内容放入Fullcalendar粘滞事件中。在日历中滚动时，只要事件不在视图之外，事件的内容就应该可见。

我用简单的CSS尝试过，但这没用，请自己看看：

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

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

有人知道如何使它正常工作吗？

Answer 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";               
    }
});

很显然，选择器和最高值是非常具体的。您可以使用js计算每个事件的合适的最远距离，并将其应用于每个滚动过程。但是，这是很多工作。