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

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!