Search code examples
javascriptjqueryjquery-waypoints

jQuery Waypoints handles the first element with a specified class only

I am trying to implement the jQuery Waypoints plugin to add an .active class to any element with a .foo class as it gets into the viewport:

<div class="foo"></div>
<div class="foo"></div>

var inview = new Waypoint.Inview({
  element: $('.foo')[0],
  entered: function(direction) {
    $(this.element).addClass("active");
  }
});

JS Fiddle: http://jsfiddle.net/g6mouxnd/

The example above will add the .active class to the first .foo container only. How do I make it work for the second and any subsequent .foo container as well?

Solution

  • You can loop over every .foo and create an Inview for each:

    $('.foo').each(function() {
  new Waypoint.Inview({
    element: this,
    entered: function(direction) {
      $(this.element).addClass('active');
    }
  });
});