使用Slick.js定製僞類常規CSS

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（和Mootools）查詢元素時使用，不能在CSS中使用它們。你可以嘗試添加一些JS代碼，應用和刪除定期CSS類時in-fold僞可以改變（滾動和縮放），但要注意的表演：

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

一些想法，如果表現不佳：

• 避免在不需要時刪除和重新添加類;
• 使用:pausepseudo event以避免頻繁發生scroll和resize事件。