在常规CSS中使用Slick.js自定义伪类

Question

我想像这样创建一些custom pseudo classes using Slick

nav:in-fold {
    display: static;
    width: 100%;
    font-size: 1.2em
}

然后在常规CSS中使用那些伪类，如此

library(plotly)

如果可以的话，我无法让它发挥作用。我错过了什么吗？

如果使用Slick.js无法做到这一点，还有其他方法可以做同样的事情吗？

Answer 1

Slick pseudos只能在使用Slick（和Mootools）查询元素时使用，不能在CSS中使用它们。您可以尝试添加一些JS代码，以便在in-fold伪可以更改（滚动和调整大小）时应用和删除常规CSS类，但要注意性能：

var updateInFoldStyle = function() {
    $$('nav.in-fold-class').removeClass('in-fold-class');
    $$('nav:in-fold').addClass('in-fold-class');
};

window.addEvent('scroll', updateInFoldStyle);
window.addEvent('resize', updateInFoldStyle);

表现不佳的一些想法：

• 避免在不需要时删除和重新添加课程;
• 使用:pause pseudo event来避免过于频繁地发送scroll和resize个事件。