【问题标题】: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 计算每个事件的适当顶部距离,并将其应用于每个滚动过程。不过,这是很多工作。

【讨论】:

  • 嘿。谢谢你的回答。如果很难实现这种行为,我会离开它。如果日历中有很多事件,那么滚动时所有事件都会有很多计算。这会导致应用性能不佳。
猜你喜欢
  • 1970-01-01
  • 2012-07-10
  • 2022-11-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-01-03
相关资源
最近更新 更多