$ (this) does not work with waypoints
The $ (this) attribute does not work with waypoints.js.
My Javascript:
$('.dipper').waypoint(function() {
$(this).addClass('test');
}, { offset: '100%' });
It's strange that this code works very well on my site:
$('.dipper').waypoint(function() {
$('.dipper').addClass('test');
}, { offset: '100%' });
In this case, I use .dipper
instead $(this)
. You can check it out on my site: http://www.sq-media.de/weboptimierungen/rehfeld
The waypoint method is not executed with the same context as the parent jQuery object. If you need this behavior, you can use each
to iterate over elements .dipper
:
$('.dipper').each(function() {
var $this = $(this);
$this.waypoint(function() {
$this.addClass('test');
}, { offset: '100%' });
});
source to share
According to the documentation provided by the waypoint, you will get the item id
this.element.id
So your function will look like
$('.dipper').waypoint(function() {
$('#' + this.element.id).addClass('test');
}, { offset: '100%' });
Link taken from http://imakewebthings.com/waypoints/guides/jquery-zepto/
Note. The only extra effort is to add the identifier to the corresponding element.
source to share