The Events Calendar Pro筛选器sticky定位滚动时不生效如何解决

• 首先确认你绑定CSS的目标选择器正确，你之前写的sticky属性没有绑定到对应筛选器容器上，针对你的站点，正确的完整CSS代码如下：

/* 绑定The Events Calendar Pro的筛选栏容器 */
.tribe-filter-bar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    /* 新增z-index避免吸顶后被其他页面元素覆盖 */
    z-index: 999;
}

• 排查所有父级元素的overflow属性：sticky定位生效的必要前提是该元素的所有上层父元素都不能设置overflow: hidden、overflow: scroll、overflow: auto，你需要逐个检查筛选栏的父容器，将上述overflow属性移除，或者修改为overflow: visible
• 确认父容器高度足够：sticky元素的滚动吸顶范围被它的直接父容器高度限制，如果父容器高度和筛选栏自身高度一致，会出现吸顶效果不触发的问题，需要保证筛选栏的父容器高度覆盖整个事件列表的滚动区域
• 清空缓存验证效果：WordPress站点修改CSS后需要清空站点缓存、浏览器本地缓存，配置了CDN的站点还需要清空CDN缓存后再测试效果

内容的提问来源于stack exchange，提问作者Aria Perkin