JSFiddle - React, Tailwind, and code Playground

by Yannick Albert

HTML

<header>HEADER</header>

<h1>Heading 1</h1>
<p>Terrae crescendo nam effigiem verba deorum suis. Est temperiemque sidera astra aethere habentia. Satus premuntur. Lucis fontes. Numero membra silvas fronde. Innabilis austro pontus cum habentem. Hunc coegit congeriem proxima indigestaque illic moles. Vesper solidumque tollere evolvit ventos zonae modo manebat fronde abscidit.</p>

<p>Vix sponte. Tellus secant origo. Nullus habentia origo quin animal mutatas diu. Ubi solum peragebant diu caeca. Tempora sic traxit conversa quanto colebat. Litora securae capacius quanto homini magni. Cuncta zephyro mixtam volucres altae terrarum dicere frigida hanc. Tegit circumfuso quam homo divino.</p>

<p>Undae erant pugnabant faecis. Umor caeca bene titan. Aeris ignea occiduo principio. Timebat motura parte librata fuerat septemque quam nondum. Bene mollia caelumque ad ut. Mentes permisit ne satus otia. Orba pondere turba nondum summaque frigida aequalis cornua convexi. Erant summaque minantia caligine.</p>




<h2>Heading 2</h2>
<p>Terrae crescendo nam effigiem verba deorum suis. Est temperiemque sidera astra aethere habentia. Satus premuntur. Lucis fontes. Numero membra silvas fronde. Innabilis austro pontus cum habentem. Hunc coegit congeriem proxima indigestaque illic moles. Vesper solidumque tollere evolvit ventos zonae modo manebat fronde abscidit.</p>

<p>Vix sponte. Tellus secant origo. Nullus habentia origo quin animal mutatas diu. Ubi solum peragebant diu caeca. Tempora sic traxit conversa quanto colebat. Litora securae capacius quanto homini magni. Cuncta zephyro mixtam volucres altae terrarum dicere frigida hanc. Tegit circumfuso quam homo divino.</p>

<p>Undae erant pugnabant faecis. Umor caeca bene titan. Aeris ignea occiduo principio. Timebat motura parte librata fuerat septemque quam nondum. Bene mollia caelumque ad ut. Mentes permisit ne satus otia. Orba pondere turba nondum summaque frigida aequalis cornua convexi. Erant summaque minantia caligine.</p>

CSS

body {
    padding-top: 128px;
    color: #444;
    font: 400 14px/1.7 "Segoe UI", Arial, sans-serif;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 128px;
    line-height: 128px;
    color: white;
    font-size: 72px;
    text-align: center;
    background: tomato;
}

JavaScript

// something simple to get the current scroll direction
// false === down | true === up
var scrollDir = (function (oldOffset, lastOffset, oldDir) {
    return function (offset) {
        // var dir = offset < oldOffset ? 'down' : offset > oldOffset ? 'up' : null;
        var dir = offset < oldOffset;
        if (dir !== oldDir) lastOffset = offset;
        oldOffset = offset;
        oldDir = dir;
        return {dir: dir, last: lastOffset};
    };
}());

var header = document.querySelector('header');
var height = header.clientHeight;
addEventListener('scroll', function () {
    var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
    var dir = scrollDir(scrollY);
    var diff = dir.last-scrollY;
    
    var max = Math.max(-height, Math.min(height, diff));
    header.style.top = (dir.dir ? max-height : max) + 'px';
});