Javascript 使用.stop（）时，jQuery没有平滑的.animate（）转换

我已经构建了一个粘性导航，当用户向下滚动时，它会消失，当用户向上滚动时，它会重新出现。例如，当阅读一篇文章时，在较小的屏幕上可以看到更多的内容

我遇到的问题是队列堆积，但我可以使用.stop解决它 但是，这造成了另一个问题，即没有平滑的动画。当您继续向上滚动时，会执行.stop，然后继续向上滚动动画，从而产生奇怪的动画效果

$(document).ready(function() {
  $(window).load(function() {

    var $menu = $('.mobile-menu');
    var previousTop = $menu.offset().top;

    $(document).scroll(function() {
        // Determine scroll position
        var top = $(this).scrollTop();

        // Check if user is scrolling up
        if (top < previousTop) {
            // .stop() prevents animation queue build-up
            $menu.animate({
                top: 0
            }, 200);
        }
        else {
            // .stop() prevents animation queue build-up
            $menu.animate({
                top: -$menu.outerHeight()
            }, 200);
        }
        previousTop = top;
    });

  });
});

小提琴：

我知道我可以使用CSS转换来解决这个问题，但是脚本必须是可重用的，编辑CSS文件并不总是一个选项

关于如何获得平滑的jQuery动画，而无需排队的任何提示

解决方案：感谢Fonzy告诉我关于队列的事情。我能够解决这个问题。

---

可能是队列：？我最近在不知道它存在的情况下使用了它。帮助我过渡：@Fonzy谢谢，这就成功了！我在一个新的提琴中添加了我最终使用的代码。将您的解决方案作为答案发布，以便我可以接受并结束此问题。谢谢：