JSFiddle - React, Tailwind, and code Playground

HTML

<div  id="square"></div>

CSS

#square {
    width:100px;
    height:100px;
    position:fixed;
    background-color:blue;
    top:5px;

 
}

body {height:2000px;}

JavaScript

var timer;

$(window).scroll(function() {
    
    clearTimeout(timer);
    timer = setTimeout( refresh , 150 );
    
    $('#square').animate({
        top: '70px',
        queue: true,
    }, 900).animate({
            top: '5px',
            queue: true
    }, 1000);
    
});

var refresh = function () { 
// do stuff
    $('#square').stop().clearQueue();
};