完整日历事件内容粘性

Question

im 试图使完整日历中的事件内部的内容具有粘性。在日历中滚动时，只要事件不在视图中，事件的内容就应该可见。

我尝试了简单的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 计算每个事件的适当顶部距离，并将其应用于每个滚动过程。不过，这是很多工作。