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

Question

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

Slick.definePseudo('in-fold', function(){
    var isInFold = false;
    // code to determine if the element is visible in the viewport
    return isInFold;
});

然后像这样在常规 CSS 中使用这些伪类

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

即使这完全可行，我也无法让它发挥作用。我错过了什么吗？

如果使用 Slick.js 做不到这一点，是否有另一种方法可以做同样的事情？

Answer 1

Slick pseudos 只能在使用 Slick(和 Mootools)查询元素时使用，不能在 CSS 中使用它们。当 in-fold 伪可以更改(滚动和调整大小)时，您可以尝试添加一些 JS 代码以应用和删除常规 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 事件。