JSFiddle - React, Tailwind, and code Playground

by Yannick Albert

HTML

<header></header>

CSS

html, body{height:200%}
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 64px;
    background: tomato;
    -webkit-transition: top 0.5s
}

JavaScript

// something simple to get the current scroll direction
// false === down | true === up
var scrollDir = (function (oldOffset) {
    return function (offset) {
        var dir = offset < oldOffset;
        oldOffset = offset;
        return dir;
    };
}());


var header = document.querySelector('header');
addEventListener('scroll', function () {
    var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
    header.style.top = -(scrollDir(scrollY) ? 0 : header.clientHeight) + 'px';
});