JSFiddle - React, Tailwind, and code Playground

by Boba Poshtar

HTML

<div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRIlC50ndkA-sZXBi-1oanGQ0aYLqeKFDmSQu1U3kWi4ZAvT_wA">
</div>

CSS

div {
  height: 5000px;
  padding-top: 500px;
}
img {
  position: relative;
  width: 100%;
}
img.fix {
  position: fixed;
  left: 0;
  top: 0;
}
img.final {
  top: 1000px;
  transform: scale(0.5);
}

JavaScript

let img = document.querySelector('img');

window.onscroll = function(){
	let sY = window.scrollY;
  if (sY <= 500) {
  	img.classList.remove('final');
    img.classList.remove('fix');
  	img.style.transform = '';
  }
  if (sY > 500 && sY < 1500) {
    img.classList.remove('final');
    img.classList.add('fix');
  	img.style.transform = 'scale(' + (2500 - sY) / 2000 + ')';
  }
  if (sY >= 1500) {
  	img.classList.remove('fix');
  	img.classList.add('final');
  	img.style.transform = '';
  }
}