Sticky tail headers with different heights using the Sticky shortcut class

sticky-tail-headers-with-different-heights-using-sticky-shortcuts.js

var tailHeaders = $('.tail-header');

for(var i = 0; i < tailHeaders.length; i++) {
    new Waypoint.Sticky({
        element: tailHeaders[i],
        context: $('#container'),
        handler: function(direction) {
            var prevTailHeader = this.waypoint.previous() ? this.waypoint.previous().adapter.$element : null;
            var nextTailHeader = this.waypoint.next() ? this.waypoint.next().adapter.$element : null;

            if(direction === 'down' && prevTailHeader){
                if(nextTailHeader.outerHeight() < prevTailHeader.outerHeight()) {
                    prevTailHeader.hide();
                }
            }

            if(direction === 'up' && prevTailHeader){
                if(nextTailHeader.outerHeight() < prevTailHeader.outerHeight()) {
                    prevTailHeader.show();
                }
            }
        }
    });
}