JSFiddle - React, Tailwind, and code Playground

by Matt Jennings

HTML

<div id="container">
<p>
<strong>Height of Scroll:</strong><br />
<span>0</span>
</p>
</div>

CSS

#container {
  height: 1000px;
}

p {
  position: fixed;
}

JavaScript

/* 
Code below immediately does an animation 
when more than 100 pixels are scroll down
OR less 100 pixels are then scrolled back up
*/

var animatedScroll = false;

$(window).scroll(function() {
	var height = $(window).scrollTop();
  $("span").empty().append(height);
  
  if( height > 100 && !animatedScroll ) {
  	animatedScroll = true;
  	$("p").animate({ padding: "200px 0 0 0"}, 500);
  }
  else if ( height < 100 ) {
    	animatedScroll = false;
    	$("p").animate({ padding: "0"}, 500);
  }
});