使用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; 
}); 

を作成し、この場合はそう

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

のように定期的にCSSでこれらの疑似クラスを使用したいですまったく可能です、私はそれを働かせることができませんでした。私は何か不足していますか？

Slick.jsを使用してこれを行うことができない場合は、同じことを行う別の方法がありますか？

Answer 1

Slick（およびMootools）で要素をクエリするときにのみSlick pseudosを使用できますが、CSSでは使用できません。パフォーマンスが悪い場合

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

いくつかのアイデア：あなたはin-fold擬似が変更（スクロールやサイズを変更する）ことができたときに適用され、通常のCSSクラスを削除するには、いくつかのJSコードを追加しようとするが、公演を意識することができ

• 不要な場合はクラスを削除して再追加しないでください。
• :pausepseudo eventを使用すると、scrollとresizeイベントが頻繁に発生するのを防ぐことができます。