JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://tympanus.net/Blueprints/AnimatedHeader/js/classie.js"></script>
<script src="http://tympanus.net/Blueprints/AnimatedHeader/js/modernizr.custom.js"></script>
<div class="container">
    <div class="cbp-af-header">
        <div class="cbp-af-inner">
            <img src="http://i.imgur.com/gHD8U9J.jpg" />
            <nav>	<a href="#">Broccoli</a>
	<a href="#">Almonds</a>
	<a href="#">Pears</a>
	<a href="#">Oranges</a>

            </nav>
        </div>
    </div>
    <header class="clearfix">	<span>Blueprint <span class="bp-icon bp-icon-about" data-content="The Blueprints are a collection of basic and minimal website concepts, components, plugins and layouts with minimal style for easy adaption and usage, or simply for inspiration."></span></span>
        	<h1>On-Scroll Animated Header</h1>

        <nav>	<a href="http://tympanus.net/Blueprints/ResponsiveMultiColumnForm" class="bp-icon bp-icon-prev" data-info="previous Blueprint"><span>Previous Blueprint</span></a>
	<a href="http://tympanus.net/Blueprints/ViewModeSwitch/" class="bp-icon bp-icon-next" data-info="next Blueprint"><span>Next Blueprint</span></a>
	<a href="http://tympanus.net/codrops/?p=15321" class="bp-icon bp-icon-drop" data-info="back to the Codrops article"><span>back to the Codrops article</span></a>
	<a href="http://tympanus.net/codrops/category/blueprints/" class="bp-icon bp-icon-archive" data-info="Blueprints archive"><span>Go to the archive</span></a>

        </nav>
    </header>
    <div class="main">
        <section>
            <div>
                <p>Dreamcatcher american apparel typewriter polaroid, Pinterest hoodie tousled vegan pickled gastropub iPhone VHS sartorial. Fanny pack vinyl fingerstache whatever, raw denim Carles literally next level fashion axe photo booth pour-over Echo Park.</p>
            </div>
        </section>
        <section>
            <div>
                <p>Raw denim selvage typewriter, thundercats viral craft beer beard keffiyeh meh. 3...

CSS

/* General Blueprint Style */
 @import url(http://fonts.googleapis.com/css?family=Lato:300, 400, 700);
 @font-face {
    font-family:'bpicons';
    src:url('../fonts/bpicons/bpicons.eot');
    src:url('../fonts/bpicons/bpicons.eot?#iefix') format('embedded-opentype'), url('../fonts/bpicons/bpicons.woff') format('woff'), url('../fonts/bpicons/bpicons.ttf') format('truetype'), url('../fonts/bpicons/bpicons.svg#bpicons') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* Made with http://icomoon.io/ */
 *, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body, html {
    font-size: 100%;
    padding: 0;
    margin: 0;
}
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
 .clearfix:before, .clearfix:after {
    content:" ";
    display: table;
}
.clearfix:after {
    clear: both;
}
body {
    font-family:'Lato', Calibri, Arial, sans-serif;
    color: #47a3da;
}
a {
    color: #f0f0f0;
    text-decoration: none;
}
a:hover {
    color: #000;
}
.container {
    position: relative;
    margin-top: 15em;
}
.container > header, .main section > div {
    width: 90%;
    max-width: 69em;
    margin: 0 auto;
    padding: 2.875em 1.875em 1.875em;
}
.container > header h1 {
    font-size: 2.125em;
    line-height: 1.3;
    margin: 0 0 0.6em 0;
    float: left;
    font-weight: 400;
}
.container > header > span {
    display: block;
    position: relative;
    z-index: 9999;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5em;
    padding: 0 0 0.6em 0.1em;
}
.container > header > span span:after {
    width: 30px;
    height: 30px;
    left: -12px;
    font-size: 50%;
    top: -8px;
    font-size: 75%;
    position: relative;
}
.container > header > span span:hover:before {
    content: attr(data-content);
    text-transform: none;
    text-indent: 0;
    letter-spacing: 0;
    font-weight: 300;
    font-size: 110%;
   ...

JavaScript

var cbpAnimatedHeader = (function () {
    var b = document.documentElement,
        g = document.querySelector(".cbp-af-header"),
        e = false,
        a = 800;

    function f() {
        window.addEventListener("scroll", function (h) {
            if (!e) {
                e = true;
                setTimeout(d, 250)
            
            
        }, false)
    }

    function d() {
        var h = c();
        if (h >= a) {
            classie.add(g, "cbp-af-header-shrink")
        } else {
            classie.remove(g, "cbp-af-header-shrink")
        }
        e = false
    }

    function c() {
        return window.pageYOffset || b.scrollTop
    }
    f()
})();