检测元素是向上还是向下移动

Question

我正在构建一个自定义jQuery动画滑块。它基本上是一个淡入淡出文本的滑块。每次文本淡入时，滑块都会捕捉到正确的位置。但是，我需要找出一种方法来将其滑回并淡出文本。截至目前，它只能褪色...想法？

    <div class="lawchar">
      <div class="gradient2">
      <div class='drag-handle'><div class="circle"></div></div>
        <section>
          <p>God's Law</p>
          <p id = "gods-character-text">God's Character</p>
        </section>
        <div id="hash-mark-1">
          ***
        </div>
         <div id="hash-mark-2">
          ***
        </div>
        <div id="hash-mark-3">
          ***
        </div>
         <div id="hash-mark-4">
          ***
        </div>
        <section>
          <p class="animate-text_1">Test Text 1</p>
          <p class="right-animate-text_1">Right Test Text 1</p>
        </section>
        <section>
           <p class="animate-text_2">Test Text 2</p>
           <p class="right-animate-text_2">Right Test Text 2</p>
        </section>
        <section>
           <p class="animate-text_3">Test Text 3</p>
           <p class="right-animate-text_3">Right Test Text 3</p>
        </section>
        <section>
           <p class="animate-text_4">Test Text 4</p>
           <p class="right-animate-text_4">Right Test Text 4</p>
        </section>
      </div>
    </div>

这里是js

  $(document).ready( function() {
  var drag = $('.circle');
  //count is used for the text classes
  var count = 1;
  //used for the drag circle to be snapped to
  var height = 195;
  var draggable = $('.circle').draggabilly({
    axis: 'y',
    containment: '.gradient2',
    scroll: false
  });
  //using this function to check the position of the dragger

  $(drag).on('dragStart', function() {
    //disallows scrolling when animation in use
    $("main").addClass('touch-interaction-active')
    $(".animate-text_"+count).velocity({opacity: [1, 0]}, 525)
    $(".right-animate-text_"+count).velocity({opacity: [1, 0]}, 525)
    count++;
  });

  $(drag).on('dragEnd', function(){
    var prevTop = drag.offSet().top;
    console.log("prevTop " + prevTop)
    $("main").removeClass('touch-interaction-active')
      $(drag).velocity({
        top: height + 'px'
      });
      //basically resets the entire animations
      console.log("drag.position.top " + drag.position().top);
      if (drag.position().top >= prevTop){
        height += 110;
        prevTop = drag.position().top;
      } else {
        height -= 100;
        prevTop = drag.position().top;
      }
   });
});