JSFiddle - React, Tailwind, and code Playground

by jfriend00

HTML

<div id="box"></div>

CSS

#box {
    position: fixed;
    background-color: red;
    height: 100px;
    width: 100%;
    right: 50px;
    top: 0;
    left: 0;
    display: none;
}

JavaScript

// jQuery plug-in
(function($) {
    var uniqueCntr = 0;
    $.fn.scrolled = function (waitTime, fn) {
        if (typeof waitTime === "function") {
            fn = waitTime;
            waitTime = 500;
        }
        var tag = "scrollTimer" + uniqueCntr++;
        this.scroll(function () {
            var self = $(this);
            var timer = self.data(tag);
            if (timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(function () {
                self.removeData(tag);
                fn.call(self[0]);
            }, waitTime);
            self.data(tag, timer);
        });
    }
})(jQuery);

// fill body with data so we can see the scroll
var str = "";
for (var i = 0; i < 1000; i++) {
    str += i + "<br>";
}
$(document.body).append(str);

// how to use this code
$(window).scrolled(function() {
    $("#box").stop().fadeIn(500).fadeOut(500);
    console.log("scrolled");
});