我想创建一些 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 做不到这一点,是否有另一种方法可以做同样的事情?
最佳答案
Slick pseudos 只能在使用 Slick(和 Mootools)查询元素时使用,不能在 CSS 中使用它们。当 in-fold
伪可以更改(滚动和调整大小)时,您可以尝试添加一些 JS 代码以应用和删除常规 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);
如果性能不佳的一些想法:
- 避免在不需要时删除和重新添加类;
- 使用
:pause
pseudo event避免过于频繁地触发scroll
和resize
事件。
关于javascript - 在常规 CSS 中使用 Slick.js 自定义伪类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40912161/