Search code examples
javascriptcssmootoolsslick.js

Use Slick.js custom pseudo-classes in regular CSS

I want to create some custom pseudo classes using Slick like this

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

and then use those pseudo-classes in regular CSS like so

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

If this is possible at all, I couldn't get it to work. Am I missing anything?

If this is not possible using Slick.js, is there another way of doing the same thing?

Solution

  • Slick pseudos can only be used when querying elements with Slick (and Mootools), you cannot use them in CSS. You could try to add some JS code to apply and remove regular CSS classes when the in-fold pseudo can change (scroll and resize), but be aware of 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);

    Some ideas if performance is poor:

    • avoid removing and re-adding class when not needed;
    • use the :pause pseudo event to avoid firing scroll and resize events too frequently.