JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">

	<div id="count">
		<p>1/3</p>
	</div>
			
	<div id="about">
		Wassup everyone
	</div>

		<div id="one" class="project">
		<div class="content__container">
			<img src="https://www.what-dog.net/Images/faces2/scroll001.jpg">
		</div>
	</div>
  
  	<div id="two" class="project">
		<div class="content__container">
      <video src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" controls preload="auto" onmouseover="this.play()" onmouseout="this.pause();"></video>
		</div>
	</div>
  
  	<div id="three" class="project">
		<div class="content__container">
			<img src="https://ksrpetcare.com/wp-content/uploads/2017/04/41059-Cute-Yellow-Labrador-puppy-in-play-bow-white-background.jpg">
		</div>
	</div>


</div>

CSS

body {
	background-color: #797979;
	color: black;
	font-family: serif;
	font-size: 2vw;
	line-height: 1.1em;
}

#about {
  padding-bottom: 1em;
}

#woof {
  height: 90vh;
}

#wrapper {
	max-width: 100vw;
	max-height: 100vh;
	overflow: scroll;
	padding-top: 1em;
	padding-bottom: 1em;
}

.project {
	background-color: transparent;
	width: 100vw;
	height: 100vh;
	position: sticky;
	top: 0;
	padding: 0 2em;
	overflow: scroll;
}

.content__container {
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#count {
	color: black;
	width: 20%;
	display: block;
	position: fixed;
	top: 0;
	right: 0;
	padding: 1em 2em 2em 0;
	z-index: 99999999999;
}

img {
  max-width: 100%;
}

video {
	max-width: 90%;
	height: 90vh;

	display: block;
	margin: 0 auto;
}

JavaScript

document.getElementById("one").onscroll = function() {myFunction()};

		function myFunction() {
		    document.getElementById("count").innerHTML = "one";
		}
    
    document.getElementById("two").onscroll = function() {myFunction2()};

		function myFunction2() {
		    document.getElementById("count").innerHTML = "two";
		}
    
        document.getElementById("three").onscroll = function() {myFunction3()};

		function myFunction3() {
		    document.getElementById("count").innerHTML = "three";
		}