title: jquery waypoints, activate when in center of viewport instead of top?
body: <p>All the documentation talks about when the waypoint reaches the <strong>top</strong> of the viewport, but I would like the trigger to happen when any part of the waypoint is in the center of the viewport.</p>
  
  <p>This code works fairly well if I'm scrolling down, but when I scroll up it doesn't work, obvoiusly.</p>
  
  <pre><code>$('.section').waypoint(function(direction) {
      highlight('#' + this.id);
  }, {
      context: '#scroll',
      offset: function (direction) {
          return $(this).height();
      }
  });
  </code></pre>
  
  <p>I tried the code below and a couple variants and it never even hits either of the return statements.</p>
  
  <pre><code>$('.section').waypoint(function(direction) {
      highlight('#' + this.id);
  }, {
      context: '#scroll',
  
      offset: function (direction) {
          if (direction == 'down') {
              return -$(this).height();
          } else {
              return 0;
          }
      }
  });
  </code></pre>
  
  <p>So now I'm trying this, based on waypoint examples, but $active.id doesn't work like this.id so my function "highlight" fails.</p>
  
  <pre><code>$('.section').waypoint(function (direction) {
      var $active = $(this);
      if (direction == 'down') {
          $active = $active.prev();
      }
      if (!$active.length) {
          $active = $(this);
      }
      highlight($active.id);
  }, {
      context: '#scroll',
      offset: function (direction) {
          return $(this).height();
      }
  });
  </code></pre>