JSFiddle - React, Tailwind, and code Playground

HTML

<section style="height:5000px;">
    <div id="menu" style="position:fixed; top:5px; left:5px; width:200px; height:100px; background:#000"></div>
</section>

JavaScript

var isAnimated = false;

$.fn.scrollEnd = function(callback, timeout) {          
  $(this).scroll(function(){
    var $this = $(this);
    if ($this.data('scrollTimeout')) {
      clearTimeout($this.data('scrollTimeout'));
    }
    $this.data('scrollTimeout', setTimeout(callback,timeout));
  });
};

$(window).scrollEnd(function (event) {    
    if ($("#menu").is(":hidden") || isAnimated) {
        $("#menu").stop(true, true).slideDown(400).animate(
            { opacity: 1 },
            { queue: false, duration: 400 }
        );
    }
}, 400);

$(window).scroll(function (event) {    
    if (!$("#menu").is(":hidden") && $("#menu").not(':animated') && $(this).scrollTop() > 200) {
        isAnimated = true;
        $("#menu").slideUp(400);$("#menu").animate(
            { opacity: 0 },
            { queue: false, duration: 400 }, function() {
                // Animation complete.
                isAnimated = false;
            }
        );
    }
});