JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div id="header" class="header h_vis"></div>

<div class="page">
<p>Phasellus metus diam, maximus nec turpis ut, malesuada tempor purus. Vivamus ut turpis ante. Nam efficitur ipsum lectus, eu faucibus enim vulputate eu. Nam nulla est, ultricies id est in, pretium consequat velit. Morbi lectus tortor, tempus in purus a, ultricies consectetur odio. Morbi ac bibendum risus. Sed rutrum leo vitae bibendum sagittis.</p>

<p>Nam bibendum in felis eget ullamcorper. Morbi in congue diam. Nulla facilisis mi quis ex molestie, ac fermentum diam viverra. Sed vitae massa id felis aliquam volutpat ut nec lorem. Praesent lacus tellus, vestibulum eget fermentum ut, dapibus non enim. Quisque et imperdiet justo. Nunc vel elit accumsan, feugiat sem vel, sodales enim. Nam pellentesque, dui vel imperdiet dictum, nisl risus molestie tortor, a molestie nunc ligula sit amet ante. Integer ullamcorper bibendum gravida. Cras id tempus libero, pellentesque fringilla sapien.</p>

<p>Nullam suscipit bibendum metus. Vestibulum accumsan ornare nulla ut congue. Duis at porta nulla, eget imperdiet nibh. Sed elementum vel ipsum non vehicula. Sed convallis tristique maximus. Cras elementum ipsum ligula, eget luctus elit rutrum sit amet. Donec ac dolor nunc.</p>

<p>Aliquam ac porttitor nulla. Integer eget tortor nulla. Donec pharetra nisi sit amet magna malesuada, sed egestas felis facilisis. Vivamus consequat nibh mauris. In nec sagittis velit, ac lacinia risus. Donec volutpat mattis quam, eu molestie velit faucibus eu. Nullam posuere ac felis sed euismod. Nulla at consectetur risus. Praesent finibus pretium pulvinar. Mauris risus libero, lacinia nec neque quis, pellentesque ornare turpis. Nullam eleifend vitae neque ut laoreet. Nam in nulla tincidunt, posuere neque ac, gravida sapien. Sed id ipsum lorem. Sed porta lorem ex. Aenean sed egestas ligula, sit amet efficitur risus.</p>

<p>Nam bibendum in felis eget ullamcorper. Morbi in congue diam. Nulla facilisis mi quis ex molestie, ac fermentum...

CSS

body {margin:0;}

.header {height:90px;background-color:#666666;position:fixed;left:0;width:100%;}
.h_vis {top:0px;transition:top 0.5s ease;}
.h_mid {top:-45px;transition:top 0.5s ease;}
.h_hid {top:-90px;transition:top 0.5s ease;}
.page {margin:100px 10px 900px 10px;}

/* Comment Section - Hell Yeah! */

JavaScript

var oldScroll = 0;
var h = document.getElementById("header");

window.addEventListener('scroll',function(event){
var sy = this.scrollY;
var os = this.oldScroll;

if (os > sy && sy > 200) {h.className = "header h_mid";}
else if (os > sy && sy < 200) {h.className = "header h_vis";}
else if (os < sy && sy < 200) {h.className = "header h_vis";}
else if (os < sy && sy < 400) {h.className = "header h_mid";}
else {h.className = "header h_hid";}

oldScroll = window.scrollY;
});