JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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

 
}
#output {
	width: 100%;
	height: 2em;
	background: #eee;
	position: fixed;
	top: 0;
	left: 0;
	font-weight: bold;
	text-align: center;
	line-height: 2;
}

#output #scrolling {
	color: green;
}
#output #stopped {
	color: red;
}
body {height:2000px;}

JavaScript

(function( $ ) {
	$(function() {
		var $output = $( "#output" ),
			scrolling = "<span id='scrolling'>Scrolling</span>",
			stopped = "<span id='stopped'>Stopped</span>";

		    $( window ).scroll(function() {
                    $('#square').animate({
                        top: '100px',
                        queue: true,
                    }, 900).animate({
                            top: '35px',
                            queue: true
                        }, 1000);;
                
		    	$output.html( scrolling );
    			clearTimeout( $.data( this, "scrollCheck" ) );
    			$.data( this, "scrollCheck", setTimeout(function() {
    				$output.html( stopped );
                    $('#square').stop().clearQueue();
    			}, 250) );

    		});

	});

})( jQuery );