$(this).addClass('why-you-no-working'); not working on waypoint?

Question

I just tried way points today as it looks awesome,

However, I'm having a hard time trying to make things work,

first simple test, works perfectly,

$('.parallax').waypoint(function() {
        alert('I work');
});

But when i use $(this), it wont work, e.g.

$('.parallax').waypoint(function() {
        $(this).addClass('why-you-no-working');
});

you can see the sample from here -> http://jsfiddle.net/4D3bH/425/

the second box should have black background color instead of blue, but for some reason its simple doesn't work,

if I use something like below, it works fine though, its

$('.parallax').waypoint(function() {
            $('.parallax').addClass('why-you-no-working');
});

Spent almost three hours trying to get it working, but no luck,

Please help :)

Answer 1

In this case this does not refer to DOMElement. You can get reference to DOMElement, inside callback, through property this.element

$('.parallax:nth-of-type(2)').waypoint(function() {        
    $(this.element).addClass('why-you-no-working');
},{offset: '1%'}); 

Example