title: jquery waypoints: how to bind multiple waypoints on the same object
body: <p>jquery waypoints fires a callback, when a object appears into viewport with scrolling. This works fine for basic implementation. </p>
  
  <p>Now I try to give two waypoints to the same 'article' tag, one right now when the <code>&lt;article /&gt;</code> appears, another one when the <code>&lt;article /&gt;</code> is visible 121px from the top: <code>offset: 121</code> (on scrolling down the page).</p>
  
  <pre><code>// waypoint 1
  $.aquaverde.article.waypoint(function(event, direction) {
          currentIndex = $(this).index();
          if (direction === "down") {
              $.aquaverde.wrapper.find('.fixed:eq('+ currentIndex +')').show().siblings(".fixed").hide();
          }
  });
  
  // waypoint 2
  $.aquaverde.article.find('.page').waypoint(function(event, direction) {
          if (direction === "down") {
              $.aquaverde.wrapper.find(".fixed").hide();
          }
      },{
      offset: 121
  });
  </code></pre>
  
  <p>unfortunately, the plugin fires both callbacks when the object is 121px from the top, so, the second configuration takes dominance.</p>
  
  <p>OK, then I tried to do a chained call:</p>
  
  <pre><code>// waypoint 1
  $.aquaverde.article.waypoint(function(event, direction) {
          currentIndex = $(this).index();
          if (direction === "down") {
              $.aquaverde.wrapper.find('.fixed:eq('+ currentIndex +')').show().siblings(".fixed").hide();
  
              // waypoint 2
              $(this).waypoint(function(event, direction) {
                  $.aquaverde.wrapper.find(".fixed").hide();
              },{
                  offset: 121             
              });
          }
  });
  </code></pre>
  
  <p>But it give's me exactly the same result like the one above. 
  Any ideas to solve that?</p>
  
  <p><a href="http://imakewebthings.github.com/jquery-waypoints/" rel="nofollow">http://imakewebthings.github.com/jquery-waypoints/</a></p>
  
  <p>Thank you.</p>