CODEWITHSUNDEEP
javascriptjquery-waypoints
cookie
cookie

Reputation: 2728

Toggle a class using waypoints

 var $foo = $("#foo");

 $foo.waypoint(function(){
    $(this).addClass("blue").removeClass("red");  
     $.notify(this.id + 'hit');
 },{offset:'25%'});

 $foo.waypoint(function(){
     $(this).addClass("red").removeClass("blue");      
 },{offset:'24%'});

 $foo.waypoint(function(){
     $(this).addClass("blue").removeClass("red");       
 },{offset:'74%'});

 $foo.waypoint(function(){
     $(this).addClass("red").removeClass("blue");      
 },{offset:'75%'});


 <div id="foo" class="blue">
  First Panel
 </div>

For a start the class in question fails to toggle. Moreover, $.notify(this.id) returns undefined for me?

$.notify(this.element.id) IS defined.

Is this something to do with the nature of chaining methods in the waypoint API? If so, how do I overcome it?

Solution:

$('#foo').waypoint(  
 function(direction) {
        $('#foo').toggleClass('fadeInLeft');
}, { offset: '50%'}); // toggle at 50% from top viewport
$('#foo').waypoint(  
 function(direction) {
        $('#foo').toggleClass('fadeInLeft');
}, { offset: '-400'}); // toggle again a further 400px down

Upvotes: 1

Views: 1257

Answers (2)

imakewebthings
imakewebthings

Reputation: 3398

Your original problem was that you used $(this), when you needed to use $(this.element).

Upvotes: 0

Jan Viehweger
Jan Viehweger

Reputation: 532

just use the toggleclass method http://api.jquery.com/toggleclass/

Upvotes: 1

Related Questions