CODEWITHSUNDEEP
javascriptjquery
frosty
frosty

Reputation: 2851

jQuery Waypoints add class when element is scrolled into view

I'm using the Waypoints plugin to check if an element is scrolled into view. I have multiple divs with class item as the user scrolls down the page, I want to add a class "viewed" to each.

$(".item").waypoint(function(){
    $(this).addClass("viewed");
    console.log("yey");
});

The console.log works, but the .addClass doesn't. Does the plugin not support $(this)?

Upvotes: 1

Views: 4587

Answers (3)

Lisa
Lisa

Reputation: 361

The checked answer caused loads of errors in newer version of this plugin.

This is what works for me:

$(".item").waypoint(function() {
    $(this.element).addClass("viewed");
});

Upvotes: 0

frosty
frosty

Reputation: 2851

I finally got it working.

$(".item").waypoint(function(){
   $(this[0,'element']).addClass("viewed");
});

The this wasn't pointed at the element, so I needed to target it.

Upvotes: 2

Jason
Jason

Reputation: 3030

You have to be careful when calling these callback functions, and what this really means. In this instance, its probably referring to your function.

Doesn't the event trigger pass the target in the function as an argument? Try using that. If you want to know what your nested this really is, console.log it.

$(".item").waypoint(function(thing){
   $(thing).addClass("viewed");
   console.log("yey");
});

Upvotes: 0

Related Questions