Utilisez Slick.js personnalisés pseudo-classes en CSS régulière

Question

Je veux créer une custom pseudo classes using Slick comme celui-ci

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

et ensuite utiliser ces pseudo-classes CSS régulière comme si

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

Si cette est possible du tout, je ne pouvais pas le faire fonctionner. Est-ce que je manque quelque chose?

Si cela n'est pas possible en utilisant Slick.js, y a-t-il une autre façon de faire la même chose?

Answer 1

Les pseudos Slick ne peuvent être utilisés que lors de l'interrogation d'éléments avec Slick (et Mootools), vous ne pouvez pas les utiliser en CSS. Vous pouvez essayer d'ajouter un peu de code JS à appliquer et supprimer des classes CSS régulières lorsque le in-fold pseudo peut changer (faire défiler et redimensionner), mais méfiez-vous des performances:

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

Quelques idées si la performance est médiocre:

• éviter d'enlever et de rajouter de la classe lorsque cela n'est pas nécessaire;
• utiliser le :pausepseudo event pour éviter de tirer scroll et resize événements trop fréquemment.