Question

我尝试使用 steady.js 在元素进入视图时触发事件。我的元素的类名为someclass。

var steady = new Steady({
    throttle: 100,
    handler: function(el) {
        console.log('woo!')
    }
});

steady.addTracker('.someclass-top', function(){
    console.log('Top of our someclass element')
});

滚动浏览.someclass元素后，我希望该跟踪器可用于“.someclass-top＆＃39;开火。然而，没有任何事情发生。

Answer 1

这就是你如何用Steady

完成你想要的

var el = document.querySelector('.someclass'); // cache element for better performance

var steady = new Steady({
    throttle: 100,
    handler: function(el, done) {
        console.log('woo!');

        // this important to tell Steady that you finished processing so it can call you later
        done();
    }
});

steady.addTracker('someclassIsVisible', function(){
    var rect = el.getBoundingClientRect();

    return (
       rect.top    >= 0
    && rect.left   >= 0
    && rect.top <= (window.innerHeight || document.documentElement.clientHeight)
    );
});

steady.addCondition('someclassIsVisible', true);

当使用steady.js将元素放入视图时，如何触发事件？

1 个答案: