title: snapping to sections without window scrolling
body: <p>I want to snap to sections within a div, however I want to do this without the window scrolling. I want to be able to scroll within that div. </p>
  
  <p>I don't believe I'm explaining myself well enough. When I scroll, the window scrolls, then article is snapped into place, and so on. I want it to be so that when I scroll within #content then article will be snapped into position.</p>
  
  <p>Any suggestions?</p>
  
  <pre><code>$(document).ready(function() {
    $("article").css("height", $(window).height() + "px");
    $("#content").sectionsnap({
      delay : 100
      , selector : 'article'
      , reference : 1
      , animationTime : 600
    });
  });
  </code></pre>
  
  <p><br></p>
  
  <pre><code>(function($) {
  $.fn.sectionsnap = function( options ) {
  
      var $wrapper = this
      , direction = 'down'
      , currentScrollTop = $("section").scrollTop()
      , scrollTimer
      , animating = false;
  
      // check the direction
      var updateDirection = function() {
          if ($("section").scrollTop() &gt;= currentScrollTop)
              direction = 'down';
          else
              direction = 'up';
          currentScrollTop = $("section").scrollTop();
      }
  
      // return the closest element (depending on direction)
      var getClosestElement = function() {
          var $list = $wrapper.find(settings.selector)
          , wt = $("section").scrollTop()
          , wh = $("section").height()
          , refY = wh * settings.reference
          , wtd = wt + refY - 1
          , $target;
  
          if (direction == 'down') {
              $list.each(function() {
                  var st = $(this).position().top;
                  if ((st &gt; wt) &amp;&amp; (st &lt;= wtd)) {
                      $target = $(this);
                      return false; // just to break the each loop
                  }
              });
          } else {
              wtd = wt - refY + 1;
              $list.each(function() {
                  var st = $(this).position().top;
                  if ((st &lt; wt) &amp;&amp; (st &gt;= wtd)) {
                      $target = $(this);
                      return false; // just to break the each loop
                  }
              });
          }
          return $target;
      }
  
      // snap
      var snap = function() {
          var $target = getClosestElement();
          if ($target) {
              animating = true;
              $('html, body').animate({
                      scrollTop: ($target.offset().top)
                  }, settings.animationTime, function() {
                      window.clearTimeout(scrollTimer);
                      animating = false;
                  });
          }
      }
      // on window scroll
      $("section").scroll(windowScroll);
      return this;
  };
  })(jQuery);
  </code></pre>
  
  <p>any suggestions are greatly appreciated</p>