JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>

CSS

div {width:50%;height:200px;margin:1500px auto;background:red;opacity:0;transition:all 1s ease;}

JavaScript

function addEvent(a,b,c,d){d = !d && false;(a.addEventListener)?a.addEventListener(b,c,d):a.attachEvent('on'+b,c);}

var div = document.getElementsByTagName("div")[0];

function scrolled(){
	var curScroll = document.documentElement.scrollTop || document.body.scrollTop,
		windowHeight = document.documentElement.clientHeight;
	
	if (curScroll >= div.offsetTop - windowHeight + div.offsetHeight/2.5){
		div.style.opacity = "1";
	}
}

addEvent(window, "scroll", scrolled, false);