在常规 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 中使用。您可以尝试添加一些 JS 代码以在 in-fold 伪可以更改（滚动和调整大小）时应用和删除常规 CSS classes，但要注意性能：

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

如果性能不佳的一些想法：

• 避免在不需要时删除和重新添加 class；
• 使用 :pause pseudo event 避免触发 scroll 和 resize 事件过于频繁。