title: Restricting jQuery-ui Draggable to drag up only, within a given area
body: <p>I've got a, fixed position, image that I'm animating with CSS and moving down the edge of the screen when the user scrolls. - Works great.</p>
  
  <p>When the image gets to the bottom of the screen the user can click on it and it animates back to the top. - Also working well.</p>
  
  <p>I'm also trying to allow the user to drag it to the top using <a href="http://jqueryui.com/draggable/" rel="nofollow">jQuery-ui Draggable</a>. - Here complications arise.</p>
  
  <p>I need the image to only be dragged up, never down, so I've restricted my draggable element to drag up only, by moving its containment-wrapper with the draggable image. I'm also restricting drag completely at the top of the page to prevent the image from being dragged beyond the top of the page. </p>
  
  <p>For the most part this works well in Firefox, but I'm having issues in Webkit browsers with the draggable image "jumping up" when the user first begins to drag it.</p>
  
  <p>I'm also having issues getting this effect to work well on different screen sizes, as I'm using both top and bottom position adjustments.</p>
  
  <p><a href="http://jsfiddle.net/apaul34208/Rj8dJ/66/" rel="nofollow"><strong>jsFiddle</strong></a></p>
  
  <pre><code>// repel down animation 
  var previousScroll = 0;
  var scroll = function () {
      var currentScroll = $(this).scrollTop();
      var z = $(window).scrollTop();
      if (currentScroll &gt; previousScroll &amp;&amp; $('#repel').css('top') &gt; '-400px') {
          //down scroll code
          $("#repel").removeClass("climb");
          $("#repel").addClass("repel").delay(400).css('top', '+=2%');
      }
      if (currentScroll &gt; previousScroll &amp;&amp; $('#repel').css('top') &lt; '-400px') {
          //down scroll code
          $("#repel").removeClass("climb");
          $("#repel").addClass("repel").delay(400).css('top', '+=0%');
      }
      if (z &lt; 10) {
          $("#containment-wrapper").css({
              height: "349%"
          });
      }
      if (z &gt; 10) {
          $("#containment-wrapper").css({
              height: "360%"
          });
      } else {
          // no- upscroll animation/code  
      }
      previousScroll = currentScroll;
      // fade in word bubble
      if (z &gt; 1250) {
          $('.go').fadeIn('slow');
      } else {
          $('.go').fadeOut('slow');
      }
  };
  
  $(document).ready(scroll);
  $(window).scroll(scroll);
  
  //remove animation when finished     
  $("#repel").on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', function () {
      $('#repel').removeClass('repel');
  });
  //bounce back to top of page when clicked      
  $('.go').click(function () {
      $('html, body').animate({
          scrollTop: 0
      }, 'slow');
      $("#repel").removeClass("repel");
      $("#repel").css('top', '-100%').addClass("climb").delay(2100).queue(function (next) {
          $(this).removeClass("climb");
          next();
      });
  
  });
  
  
  // drag Up, but not down
  $('#repel').draggable({
      axis: "y",
      containment: "#containment-wrapper",
      scroll: true,
      scrollSensitivity: 100,
      scrollSpeed: 25,
      cursor: '-moz-grabbing',
      addClasses: false
  });
  
  $('#repel').mousemove(function () {
      var x = $('#repel').css('bottom');
      var z = $(window).scrollTop();
      $("#containment-wrapper").css({
          bottom: x
      });
      if (z &lt; 10) {
          $("#containment-wrapper").css({
              bottom: "-150%",
              height: "349%"
          });
      } else {
          $("#containment-wrapper").css({
              bottom: x
          });
      }
  });
  </code></pre>
  
  <p>Is there a better way to do this?</p>
  
  <p>I've tried <a href="http://api.jqueryui.com/draggable/#event-drag" rel="nofollow">Drag functions</a>, but they seem a little twitchy.</p>