Scroll

by evgkch

HTML

<div id="header"></div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div><div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div>TEST</div>
<div id="showScroll"></div>

CSS

#header {
  position: fixed;
  height: 60px;
  width: 100%;
  background-color: green;
  transition: all 0.1s ease-out;
}

JavaScript

(function() {
	const start = performance.now();
  let scrollY = window.pageYOffset; 
	setInterval(() => {
  	const speed = (scrollY - window.pageYOffset) / 100;
    scrollY = window.pageYOffset;
    if (Math.abs(speed) > 2) {
    	document.getElementById('header').style.height = '30px'
      document.getElementById('header').innerHTML = speed;
    }
    if (Math.abs(speed) < .5) {
    	document.getElementById('header').style.height = '60px'
    }
  }, 100)
})()