title: jScrollPane - binding to events adds to all instances
body: <p><a href="http://jscrollpane.kelvinluck.com/events.html" rel="nofollow">http://jscrollpane.kelvinluck.com/events.html</a></p>
  
  <p>In this example jscrollpane uses a class selector to bind functionality to the events. I cannot seem to bind to only one object:</p>
  
  <pre><code> var pane = $('#scrollable');
  pane.bind(
      'jsp-scroll-y',
      function (event, scrollPositionY, isAtTop, isAtBottom) {
          if (isAtBottom) {
              $('#navigation').addClass('hiddenAtBottom');
          } else {
              $('#navigation').removeClass('hiddenAtBottom');
          }
          if (isAtTop) {
              $('#lioverview a').addClass('focus');
          } else {
              $('#lioverview a').removeClass('focus');
          }
          $('.content').each(function (i) {
              var ob = $(this);
              var offSet = ob.offset();
              var newOffset = (offSet.top - 150);
              if (newOffset &lt;= 0) {
                  $('#navigation a').removeClass('focus');
                  $('#navigation li:eq(' + i + ') a').addClass('focus');
              }
  
          });
      }
  );
  pane.jScrollPane({
      animateScroll: true,
      animateDuration: 2500,
      animateEase: '',
      hijackInternalLinks: true
  });
  </code></pre>
  
  <p>works as intended. If a add another scrollable area which I dont want the above to be bound to, I would think that I create another instance (and a seperate object)</p>
  
  <p>something simple like</p>
  
  <pre><code>$('.accScrollable').jScrollPane();
  </code></pre>
  
  <p>Which, the scrollbars appear but every time I scroll to the bottom of these elements, the other bound function fires!</p>
  
  <p>anyone know whats going on here?</p>
  
  <p>regards</p>