Search code examples
jqueryjquery-waypoints

JQuery waypoints using multiple classes

I'm using http://imakewebthings.com/jquery-waypoints and having 5 classes (staffmember), at the moment waypoints fires on all the classes at once when getting the first class. How to stage it so that I can add as you pass through the list?

<ul id="staff">
<li class="staffmember"></li>
    <li class="staffmember"></li>
    <li class="staffmember"></li>
    <li class="staffmember"></li>
    <li class="staffmember"></li>
</ul>

jQuery

$('.staffmember').waypoint(function(direction) {
jQuery('.staffmember').addClass('on').next();
});

Thanks

Solution

  • If I understand you correctly try this. It should iterate through each .waypoint element and add individual waypoints to each one that add the .on class as you scroll past them.

    $('.staffmember').each(function() {
  $(this).waypoint(function() {
    $(this).addClass('on');
  });
});