JQuery waypoints using multiple classes

Question

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

score 11 · Accepted Answer · answered Jun 05 '14 at 12:30

11

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

answered Jun 05 '14 at 12:30

Ennui

10,102
3
35
42

3

`.waypoint` will iterate over every matching element, so the `each` call isn't necessary. – imakewebthings Jun 10 '14 at 20:20
6

In Waypoints 3.0, `this` will refer to the Waypoint instance, so the addClass line turns into `$(this.element).addClass('on');` – imakewebthings Jan 11 '15 at 07:14
Does not work for me. When I have four elements (with the same class) they all animate when the first one is scrolled past.. I used this code from the answer above – nclsvh Apr 05 '16 at 14:09
I have done an update to reflect @imakewebthings feedback :) – Neil Apr 28 '16 at 10:42

score 0 · Answer 2 · edited May 23 '17 at 11:55

I think your problem was that you were adding the "on" class to ALL matching elements (jQuery('.staffmember')), instead of just to the triggering element. Waypoints already does the iteration for you, as imakewebthings points out.

So, your original jQuery should be:

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

That should do the trick without the each.

JQuery waypoints using multiple classes

2 Answers2

Linked