Используйте 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 pseudos может использоваться только при запросе элементов с помощью 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 событий слишком часто.