Fullcalendar event content sticky

im trying to make the content inside of an event in the Fullcalendar sticky. When you scroll in the calendar the content of the events should be visible as long as the event isn't out of the view.

I tried it with simple css but that doesn't work, see for yourself:

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

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

Has anyone an idea how to get this working or isn't it that easy?

It's not possible to use position:sticky out of the box, but here's an example of how you might go about it with js (add this to the end of your script):

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

Obviously the selector and top values are very specific. You can use js to calculate the appropriate top distance for each event, and apply it for each scroll proc. That is a lot of work though.