steady.js

var el = document.getElementById('head'); // caching it 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('is-visible-head', function(){
    var rect = el.getBoundingClientRect();

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

steady.addCondition('is-visible-head', true);

Still no luck.

1. No 'handler complete' log
2. My 'is-visible-.mission' tracker doesn't fire.

Code:

var log = console.log.bind(console);
log('Setting up steady...')
var steady = new Steady({
    throttle: 100,
    handler: function(el, done) {
        log('handler complete!')
        done()
    }
});

steady.addTracker('is-visible-.mission', function(){
    log('Top of our custom element')
});

First thing you don't have a condition that steady matches the tracker value to!

var log = console.log.bind(console);
log('Setting up steady...')
var steady = new Steady({
    throttle: 100,
    handler: function(el, done) {
        log('handler complete!')
        done()
    }
});

steady.addTracker('is-visible-.mission', function(){
    log('Top of our custom element')
   // you need to return a value that Steady matches it to the condition value
   return true
});

steady.addCondition('is-visible-.mission', true);

Hrm, adding the return true still doesn't change anything - only 'Setting up steady...' ever gets run. No errors.

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

steady.addTracker('is-visible-.mission', function(){
    log('Top of our custom element')
    // you need to return a value that Steady matches it to the condition value
    return true
});

The condition is missing, that's why it's not firing.

Because Steady can't match the values it collects with something you didn't assign a condition to.

Add this line after the code you pasted:

steady.addCondition('is-visible-.mission', true);

OK - I think I've been confused about what the tracker is vs the condition.

Current code - no events still fire.

var log = console.log.bind(console);

log('Setting up steady')
var steady = new Steady({
    throttle: 100,
    handler: function(el, done) {
        log('handler complete!')
        done()
    }
});

steady.addTracker('is-visible-.mission', function(){
    log('Top of our custom element')
    return true
});

steady.addCondition('is-visible-.mission', true);

I just copied your code and tested it on this page through the console and it worked!