How do I know how many instances of Waypoints are toggled at once?

Question

I have multiple elements placed in several rows I am calling Waypoints instances on.

<div class="row">
  <div class="col-xs-6 col-sm-4"><div class="foo"></div></div>
  <div class="col-xs-6 col-sm-4"><div class="foo"></div></div>
  <div class="col-xs-6 col-sm-4"><div class="foo"></div></div>
  <div class="col-xs-6 col-sm-4"><div class="foo"></div></div>
  <div class="col-xs-6 col-sm-4"><div class="foo"></div></div>
  <div class="col-xs-6 col-sm-4"><div class="foo"></div></div>
</div>

I need to count how many of Waypoints instances have been called at once (i.e. for each of the .foo elements that are on the same line):

var total = 0;

$('.foo').each(function() {
  $(this).waypoint({
    handler: function(direction) {
      total++;
    }
  });
});

The code above does it for the first row, however I am not sure how do I reset it before the items from the second row will go active (to count Waypoint instances for the items in the second row, etc.). Any ideas?

Answer 1

The total number of Waypoints instances fired at once can be found with this.group.waypoints.length. You can read more about it at: http://imakewebthings.com/waypoints/api/group/.