JSFiddle - React, Tailwind, and code Playground

by DJS Baker

HTML

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

JavaScript

var $menu = $("#menu");
    var opacity = $menu.css("opacity");
    var scrollStopped;

    var fadeInCallback = function () {
        if (typeof scrollStopped != 'undefined') {
            clearInterval(scrollStopped);
        }

        scrollStopped = setTimeout(function () {
            $menu.animate({ opacity: 1 }, "slow");
        }, 2000);
    }

    $(window).scroll(function () {
        if (!$menu.is(":animated") && opacity == 1) {
            $menu.animate({ opacity: 0 }, "slow", fadeInCallback);
        } else {
            fadeInCallback.call(this);
        }
    });