CODEWITHSUNDEEP
javascriptsteady.js
mikemaccana
mikemaccana

Reputation: 123410

How can I fire an event when an element comes into view using steady.js?

I'm trying to use steady.js to fire an event when an element comes into view. My element has the classname 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')
});

After scrolling past the .someclass element, I expect the tracker for '.someclass-top' to fire. However nothing happens.

Upvotes: -1

Views: 80

Answers (1)

Khalid Lafi
Khalid Lafi

Reputation: 11

This is how you can accomplish what you want with 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);

Upvotes: 0

Related Questions