JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>

CSS

body {height:2000px;}
div {position:fixed;width:100%;height:80px;top:-80px;left:0;background:#000;opacity:0;transition:opacity .4s ease;}
div.show {top:0;opacity:1;}

JavaScript

var div = document.querySelector("div");

function scrolled(){
	var currentScroll = document.body.scrollTop || document.documentElement.scrollTop;
	
	div.className = (currentScroll > 250) ? "show" : "";
}

addEventListener("scroll", scrolled, false);